Question

我的应用程序使用此接口的JSON元素数组：

export interface ElementData {
    elementID: string;
    elementType: string;
    elementTypeTitle: string;   
    nbr: number;
    name: string;  
    site: string;   
    states: StateInfo[];
  }

import { StateDefinition } from "./StateDefinition";

export interface StateInfo {
    definition: StateDefinition
    stateValue: string
}

import { StateEnumDefinition } from './StateEnumDefinition';

export interface StateDefinition {
    stateNbr: number
    elementTyp: string
    stateType: string
    stateTypeTitle: string
    enumValues: StateEnumDefinition[]
}

内容应显示在表格中。这是实现（HTML）：

<table mat-table [dataSource]="dataSource" class="example-table">
      <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
      </ng-container>

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

这是ts文件：

displayedColumns: string[] = ['nbr', 'name', 'site'];
columnsToDisplay: string[] = this.displayedColumns.slice();

 getAllElementsForSiteAndType(siteID: string, elementType: string){
    this._elementsService.getElementsForSiteAndType(siteID, elementType).subscribe(result => {

      this._elements = result;

      if (result != null && result.length > 0)
      {
        result[0].states.forEach(state => {
          this.displayedColumns.push(state.definition.stateTypeTitle)
          this.columnsToDisplay.push(this.displayedColumns[this.displayedColumns.lastIndexOf(state.definition.stateTypeTitle)]);
        });
      }

      this.dataSource = new MatTableDataSource(result);

    });
  }

该表应具有“静态”行，例如ElementData.nbr，ElementData.name和ElementData.site。

该表还应具有基于elementType的“动态”列（例如，电视具有不同的状态，例如冰箱）。因此，我需要根据我的StateInfo[]数组的状态生成“动态”列。到目前为止，这是起作用的。

我的问题是如何用数据填充列。

标题应为“ ElementData.states [x] .definition.stateTypeTitle” 并且单元格值应为“ ElementData.states [x] .stateValue”

任何想法如何实现这一目标？

角材料表：用行数据填充生成的列

0 个答案: