带有动态行的角度材料数据表 [英] Angular Material data Table with dynamic rows

问题描述

我正在使用Angular 5和Angular Material数据表来构造数据.我在下面的站点中引用一个示例.考虑到这一点，我需要将动态数据包括到每一行中，如屏幕快照中收藏夹"是列标题的

I am using Angular 5 and Angular Material data table for constuction of the data. I'm referring an example in the below site. In this consider I need to include the dynamic data to each row as in the screenshot where 'favorite' is the column header.

http://www.devglan.com/angular/angular-data -table-example

示例Json以供交叉参考.

Sample Json for cross reference.

constELEMENT_DATA: Element[
  
]=[
  {
    position: 1,
    firstName: 'John',
    lastName: 'Doe',
    email: '[e-mail]'favoriteColor: 'red',
    favorite: {
      favoriteFood: [
        'Idly',
        'Vada'
      ],
      favoriteCar: 'Mercendes Benz',
      favoriteMovie: 'JamesBond movie',
      favoritePlace: 'HillStation'
    }
  },
  {
    position: 1,
    firstName: 'Mike',
    lastName: 'Hussey',
    email: '[e-mail]',
    favorite: {
      favoriteFood: 'Dosa',
      favoriteMovie: 'RajiniKandth movie'
    }
  },
  {
    position: 1,
    firstName: 'Ricky',
    lastName: 'Hans',
    email: '[e-mail]',
    favorite: {
      favoriteFood: 'Chappathi',
      favoriteCar: 'BMW'
    }
  },
  {
    position: 1,
    firstName: 'Martin',
    lastName: 'Kos',
    email: '[e-mail]'favorite: {
      
    }
  },
  {
    position: 1,
    firstName: 'Tom',
    lastName: 'Paisa',
    email: '[e-mail]',
    favorite: {
      favoriteCar: 'Ford'
    }
  }
];

HTML:

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

    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

    <ng-container matColumnDef="lastName">
      <mat-header-cell *matHeaderCellDef> Last Name </mat-header-cell>
      <mat-cell *matCellDef="let element">  <mat-cell>
    </ng-container>

    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

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

我的错误我无法在屏幕截图中正确捕获输出.如果您将John名列为第一行，则Food:Idly，Vada将出现在该行中，但下一行将包含Car:Mercendes Benz，下一行将包含JamesBond电影，下一行是HillStation.属于这些行的所有其他列将为空白.下一次迭代将以类似的方式为Ricky名字开始.在杰森(Json)中，所有这些喜欢的物品都在喜欢的物品之下.

My mistake I was unable to capture the output properly in the screenshot. If you consider firstname John as first row, Food: Idly, Vada will appear in that row, but next row will have Car: Mercendes Benz, next row will have movie JamesBond movie and next row place: HillStation. where as all other columns belonging to these rows will be blank. Next iteration will start for firstname Ricky in similar fashion. In the Json consider all these favorite items are under favorite.

推荐答案

仅在HTML中使用循环.

Simply use a loop in your HTML.

Stackblitz

Stackblitz

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">
    <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns">
      <mat-header-cell *matHeaderCellDef> {{ col }} </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element[col] }} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

这篇关于带有动态行的角度材料数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！