dataSource.connect 在使用 Material 数据表时不是函数

Question

我会使用 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>

Answer 1

参考one of the examples from the docs。

您需要这样实例化一个 MatTableDataSource：

dataSource = new MatTableDataSource(yourDataArray);

对于您的情况，您还可以添加类型信息：

dataSource = new MatTableDataSource<nomchamp>(yourDataArray);

dataSource.connect 在使用 Material 数据表时不是函数

dataSource.connect is not a function when using Material datatable

angular-material

angular-datatables

angular-material2

angular