Angular 创建 reusable/generic html-结构

Question

我认为这很容易，但我找不到解决我问题的方法。

所以，我想创建一个通用的 table.component。我的想法是通过在 html 代码中做一些表达式来提供所需的所有信息。

给定的数据如下所示：

  myData: [
    {
      id: 1,
      name: 'name1',
      stuff: 'stuff..'
    },...
]

table.component:

我的想法是使用列 identifiers/titles 从 tableData 中获取数据信息 - 像这样： {{row}}.{{item}} // item 是列标识符，否则 item 是数据值的标识符，row 是循环外的当前元素。

@Component({
  selector: 'app-table',
  template: `
    <div class="{{tableName}}-header">
      <h3>{{tableName}}</h3>
    </div>
    <div class="{{tableName}}-content">
      <table mat-table [dataSource]="tableData" class="">
       
        <div *ngFor="let item of displayedColumns">
          <ng-container matColumnDef="{{item}}">

            <th mat-header-cell *matHeaderCellDef> {{item}} </th>
            <td mat-cell *matCellDef="let row"> {{row}}.{{item}} </td>

          </ng-container>
        </div>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
  `,

  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  @Input() tableName: string;
  @Input() tableData: any;

  displayedColumns: string[] = ['id',  'name', 'stuff'];

  // doing in other component.
  tableData = myData;

有没有一种（简单的）方法来连接两个表达式来创建一个新表达式？（将两个表达式解析为字符串，将它们连接成一个点符号并将它们解析回一个表达式？）

Answer 1

要动态访问行对象的属性，您必须使用括号表示法而不是点表示法：

<td mat-cell *matCellDef="let row"> {{row[item]}} </td>

此外，由于您使用的是 Angular Material，您可能有兴趣改用他们的 MatTextColumn：https://material.angular.io/components/table/api#MatTextColumn

Answer 2

您可以创建一个以 row 和 item 作为参数的函数：

getDataBy(row, item) => {
    return this.myData[row][item]
}

Angular 创建 reusable/generic html-结构

Angular create reusable/generic html-structure

generics

expression

concatenation

reusability

angular