Question

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

我曾尝试将ngFor循环嵌套在html文件中，但最终得到相同的结果。

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表。我想说三个，名称决定了应该在哪个表中显示数据。即所有巴兹都放在一张桌子中，所有巴兹都放在一张桌子中。

Answer 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">

将数据源拆分为多个mat表

1 个答案: