Question

我正在尝试在Angular 7中实现MatTableDataSource，我正在遵循Angular Material准则，但似乎不起作用，并且我得到了

无法读取未定义的属性“数据”

`。在控制台中打印时，数据被绑定并显示结果，但未绑定到我的表。

HTML

<div class="mat-elevation-z8 full-width-table" *ngIf="brList">
<table class="full-width-table" mat-table [dataSource]="brList" matSort aria-label="Elements">
  <!-- Id Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
    <td mat-cell *matCellDef="let row">{{row.id}}</td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
    <td mat-cell *matCellDef="let row">{{row.name}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<mat-paginator #paginator
    [length]="dataSource.data.length"
    [pageIndex]="0"
    [pageSize]="10"
    [pageSizeOptions]="[10, 15, 20, 25]">
</mat-paginator>
</div>

模型

export interface Br {
    id: number;
    name: string;
}

组件

export class ListBComponent implements OnInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  brList: MatTableDataSource<Br> = new MatTableDataSource<Br>();
  displayedColumns = ['id', 'name'];
  constructor(private mm: BrService){

  }
  ngOnInit() {
    this.mm.getMM().subscribe(
      result =>
      {
         this.brList.data = result;
         this.brList.paginator = this.paginator;
         this.brList.sort = this.sort;
         console.log(this.brList); //prints the data correctly
      })
  }

Answer 1

错误在这里：

<mat-paginator #paginator
    [length]="dataSource.data.length"
    [pageIndex]="0"
    [pageSize]="10"
    [pageSizeOptions]="[10, 15, 20, 25]">
</mat-paginator>

我认为dataSource.data.length不是brList.data.length。

MatTableDataSource无法读取Angular 7中未定义的属性“数据”

1 个答案: