Angular 创建可重用/通用 html 结构

Question

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

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

给定的数据如下所示：

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

table.component:

我的想法是使用列标识符/标题从 tableData 获取数据信息 - 像这样：{{row}}.{{item}} // item 是列标识符，否则 item 是数据的标识符-values 和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]
}