Question

我是Angular的新手，我正在建立一个数据表以从一个类中获取信息，并在数据源中以一行而不是列的形式显示有关某行中多个项目的信息。

由于我可以有任意多的行，所以我不能只是将所有数据硬编码到表中。

数据来自电子表格，其中每一行代表一个较大的实体，电子表格的每一列要么是我表中的一行，要么是我表中列的关联属性。

我看过https://material.angular.io/components/table/examples，但对我没有帮助。

列名：ID，Attr1_desc，Attr1_value，Attr2_desc，Attr2_value。我希望每个属性都位于单独的行中，每个attr_desc和att_value都是它自己的列。该表由我的电子表格的一行中的数据组成。

由于列名不是我想要的单元格值，所以我也不确定如何应用逻辑来格式化名称（例如Attr1应该称为Character而不是Attr1）。

数据源：

export interface MyData {
  ID: number,
  attr1Desc: number,
  attr1Value: string,
  attr2Desc: number,
  attr2Value: string
}

HTML：

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="Attribute_No">
    <th mat-header-cell *matHeaderCellDef>Attribute No</th>
    <td mat-cell *matCellDef="let attr">
      <div *ngIf="attr == attr1">Character</div>
      <div *ngIf="attr == attr2">World</div>
    </td>
  </ng-container>
  <ng-container matColumnDef="Attr_desc">
    <th mat-header-cell *matHeaderCellDef>Attribute Description</th>
    <td mat-cell *matCellDef="let attr_desc">{{attr_desc}}</td>
  </ng-container>
  <ng-container matColumnDef="Attr_value">
    <th mat-header-cell *matHeaderCellDef>Attribute Value</th>
    <td mat-cell *matCellDef="let attr_value">{{attr_value}}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>

TS：

import sampleData from 'data.json';

export class RowDataComponent {
  displayedColumns: string[] = ['Attribute_No', 'Attr_desc', 'Attr_value']
  data: string[] = ['Attr_1', 'Attr_2'];
  dataSource = new MatTableDataSource(sampleData);
}

应该有三列：属性，描述，值，每一行应该是一个不同的属性。 As shown here

Answer 1

HTML：

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="Attribute_No">
    <th mat-header-cell *matHeaderCellDef>Attribute No</th>
    <td mat-cell *matCellDef="let attr;let i = dataIndex;">
      <div *ngIf="i == 0">Character</div>
      <div *ngIf="i == 1">World</div>
    </td>
  </ng-container>
  <ng-container matColumnDef="Attr_desc">
    <th mat-header-cell *matHeaderCellDef>Attribute Description</th>
    <td mat-cell *matCellDef="let attr_desc">{{getValue(i, 'Desc')}}</td>
  </ng-container>
  <ng-container matColumnDef="Attr_value">
    <th mat-header-cell *matHeaderCellDef>Attribute Value</th>
    <td mat-cell *matCellDef="let attr_value">{{getValue(i, 'Value')}}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>

将此方法添加到您的TS中：

getValue(index, type){
    return this.dataSource['attr'+(index+1)+type];
}

Answer 2

<ng-container matColumnDef="Attr_desc">
    <th mat-header-cell *matHeaderCellDef>Attribute Description</th>
    <td mat-cell *matCellDef="let attr_desc">{{attr_desc}}</td>
</ng-container>

matCellDef->这里的变量“ attr_desc”包含元素，相反，您可以放let element并使用{{element.attr_desc}}

使用列数据填充Angular数据表中的行

2 个答案: