Question

我试图弄清楚如何绑定分配给Angular mat-table数据源的对象的集合。这是我用来设置为数据源的数据结构

myData: myDataViewModel[] = [
  {
    month: 'January',
    names: [ {name: 'name1'}, 
             {name: 'name2'}, 
             {name: name3'}, 
             {name: 'name4'}
    ]
  },
  {
    month: 'Febuary',
    names: [ {name: 'name5'}, 
             {name: 'name6'}, 
             {name: name7'}, 
             {name: 'name8'}
  }

];

在我的打字稿代码中，this.datasource.data = this.myData;

所以myData是对象的集合。在我的html代码中，我可以获取显示在垫子表上的月份值，但可以获取名称的值。当我按f12键时，我看到错误提示无法读取属性'names'

我查看了此链接Angular 7 Mapping object with array of object to mat table，但没有帮助

到目前为止，这是我的html代码

  <table mat-table [dataSource]="dataSource" matSort>


    <ng-container matColumnDef="month">
        <tr mat-header-cell *matHeaderCellDef mat-sort-header></tr>
        <td mat-cell *matCellDef="let myData"> {{myData.month}} </td>
        <tr><hr></tr>
    </ng-container>


    <ng-template *ngFor="let myData; let displayName of myData.displayNames" >
        <ng-container matColumnDef={{ displayName.name }}>
   <td mat-cell *matCellDef="let srow">{{ displayName.name}}
          </ng-container>
    </ng-template>


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

Angular Material垫表垫单元绑定到对象和属性的数据源

0 个答案: