Question

我正在尝试使用MatTableDataSource填充材料表，但它会在以下错误中显示值而不是属性。

ERROR TypeError: Cannot read property '5725a680b3249760ea21de52' of undefined
at Object.eval [as updateDirectives] (ContactListComponent.html:7)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:10756)
at checkAndUpdateView (core.js:10153)
at callViewAction (core.js:10394)
at execEmbeddedViewsAction (core.js:10357)
at checkAndUpdateView (core.js:10154)
at callViewAction (core.js:10394)
at execComponentViewsAction (core.js:10336)
at checkAndUpdateView (core.js:10159)
at callViewAction (core.js:10394)

“ 5725a680b3249760ea21de52”，这是属性ID的值。

这是数据。

data= [
  {
      'id'      : '5725a680b3249760ea21de52',
      'name'    : 'Abbott',
      'lastName': 'Keitch',
      'avatar'  : 'assets/images/avatars/Abbott.jpg',
      'nickname': 'Royalguard',
      'company' : 'Saois',
      'jobTitle': 'Digital Archivist',
      'email'   : 'abbott@withinpixels.com',
      'phone'   : '+1-202-555-0175',
      'address' : '933 8th Street Stamford, CT 06902',
      'birthday': null,
      'notes'   : ''
  }
];

这就是初始化表格数据的方式。

this.dataSource= new MatTableDataSource<any>(this.data);

出现错误的第一列。

<ng-container cdkColumnDef="checkbox">
    <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
    <mat-cell *cdkCellDef="let contact">
        <mat-checkbox [(ngModel)]="checkboxes[contact.id]" (ngModelChange)="onSelectedChange(contact.id)"
                      (click)="$event.stopPropagation()">
        </mat-checkbox>
    </mat-cell>
</ng-container>

我的代码有什么问题，我找不到任何帮助的解决方案？

Answer 1

检查数据格式。它应该看起来像这样，然后使用* ngFor

data = [

{id   : '5725a680b3249760ea21de52'},
{name : 'Abbott'},
{lastName: 'Keitch'}

]

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

1 个答案: