时间戳

首页 > 解决方案 > MatTableDataSource 无法读取 Angular 7 中未定义的属性“数据”

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

问题描述

我正在尝试MatTableDataSource在 Angular 7 中实现，我正在遵循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
      })
  }

标签： angularangular-material

解决方案

错误在这里：

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

我认为不是dataSource.data.length你的意思brList.data.length。

推荐阅读