将数据源拆分为多个 mat 表答案

【问题标题】：split datasource into multiple mat tables将数据源拆分为多个 mat 表
【发布时间】：2019-05-03 11:43:11
【问题描述】：

我正在从后端服务器接收多个 json 对象（关于 Jenkins 中的当前构建），并对其进行迭代并添加到数据源。现在，我遇到的主要问题是我希望所有相互关联的构建都放在同一个表中，然后为下一个构建生成一个新表。动态生成表很容易，但它会为每个构建生成一个表，我希望相同的构建保持在同一个循环中。

我尝试在 html 文件中嵌套 ngFor 循环，但结果相同。

multiple tables instead of three

尝试将数据源拆分为三个数据源最终破坏了生成表的 ngFor 循环。

html 文件：

  <div *ngFor="let data of dataSources[0];">{{data.serviceName}}
    <mat-table [dataSource]="dataSources" class="mat-elevation-z8">
      <ng-container matColumnDef="jobnumber">
        <mat-header-cell *matHeaderCellDef>Job Number</mat-header-cell>
        <mat-cell *matCellDef=""> {{data.jobNumber}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef=""> {{data.serviceName}} </mat-cell>
      </ng-container>
etc

从后端接收的ts文件：

if ( incomingData !== null ) {
        incomingData.service.forEach(element => {
          element.forEach(service => {
            if ( service[7] === 'server') {
              let data= {
                name : service[1],
                duration: service[2],
                timestamp : service[3],
                result : service[4],
                jobNumber : service[6],
                serviceType : service[7],
                serviceName : service[8]
              }
              this.foo.push(data);
            }

          });
        },
        this.dataSources.push(this.foo)
        );

图片显示了 6 张桌子。我想要三个，其中名称决定数据应显示在哪个表中。 IE。一张桌子上的所有 Baz，一张桌子上的所有 Bar。

【问题讨论】：

标签： angular7

【解决方案1】：

解决了它删除 forEach 并映射后端数据：

 if ( incomingData !== null ) {
        incomingData.service.map((services) => {
          let service = [];
          services.map((build) => {
            let jenkin = {
              name : build[1],
              duration: build[2],
              timestamp : build[3],
              result : build[4],
              jobNumber : build[6],
              serviceType : build[7],
              serviceName : build[8]
            }
            service.push(jenkin)
        })
        this.dataSources.push(service)
        })
      }

然后在html文件中：

  <div *ngFor="let data of dataSources;">
    <mat-table [dataSource]=data class="mat-elevation-z8">

【讨论】：