我将使用 Material 数据表和数据源作为数组。
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { AjouttextService } from '../ajouttext.service';
import { DataSource } from "@angular/cdk/collections";
import { Observable } from "rxjs/Observable";
import { nomchamp } from '../model';
@Component({
selector: 'app-datatable',
templateUrl: './datatable.component.html',
styleUrls: ['./datatable.component.css']
})
export class DatatableComponent implements OnInit {
constructor(private dataService: AjouttextService) { }
data: nomchamp[] = [{ id: "33", text: "HAHA" }, { id: "55", text: "bzlblz" }];
displayedColumns = ['text'];
dataSource = this.data;
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
}
ngOnInit() {
}
}
当我运行我的应用程序时,我在 html 文件第 2 行中收到此错误:
ERROR TypeError: this.dataSource.connect is not a function
这是 html 文件:
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="text">
<mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.text}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
最佳答案
引用one of the examples from the docs .
您需要这样实例化 MatTableDataSource
:
dataSource = new MatTableDataSource(yourDataArray);
根据您的情况,您还可以添加类型信息:
dataSource = new MatTableDataSource<nomchamp>(yourDataArray);
关于angular - 使用 Material 数据表时 dataSource.connect 不是一个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49101361/