将带有对象数组的对象映射到角度7中的角度材料垫表

时间:2019-07-29 12:52:24

标签: angular angular-material angular7

我试图显示包含

之类的内部对象的对象数组
users=[
 { username:'xyz@gmail.com',firstname: 'XYZ',lastname:'yz',locations:['A','B','C']}]



<div class="mat-elevation-z8">
      <table mat-table [dataSource]="dataSource" mat-sort>  
        <ng-container matColumnDef="username">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> User Name </th>
          <td mat-cell *matCellDef="let row"> {{row.username}}</td>
        </ng-container>

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

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


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

      </table>

      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

我想在位置数组中显示数据。我不知道如何映射它。请帮助

1 个答案:

答案 0 :(得分:0)

如果您想在表格中显示为A,B,C,则可以这样:

<ng-container matColumnDef="lastname">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> Locations </th>
     <td mat-cell *matCellDef="let row"> 
        <span *ngFor="let loc of row.locations"> {{loc}},</span>
     </td>
</ng-container>