Angular 迭代角材料表

我使用角度材质

mat table

，据我所见，它有一个特殊的循环属性标记，如图所示。为了删除不必要的部分，我尝试迭代记录并动态构建表。我尝试使用

…

进行迭代，但失败了。那么，可以使用一种特殊的语法吗

以下是我尝试重复的部分：

<ng-container matColumnDef="weight">
  <th mat-header-cell *matHeaderCellDef> Weight </th>
  <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>

重量
{{element.weight}}

创建一个可重用的matTable视图组件，如下所示：

我们可以看到columnHeaders是一个数组

<ng-container 
  *ngFor="let colName of columnHeaders; let i = index" 
      matColumnDef="{{ displayedColumns[i] }}"
 >

或者类似于html中的这一点，假设app material表是一个可重用的视图，显示了上面所示的绑定

<app-material-table
   [dataSoure]="myArray"
   [columnHeaders]="columnHeaders"
   [displayedColumns]="displayedColumns"     
</app-material-table>

---

MatTable自动绑定到数组。只需设置列名和字段属性名。这里有一本初级读物@JohnPeters，非常感谢，看起来很有用。但在第一部分中，我看到列名不是从数据源收集的，而是静态给定的。之所以要这样做，是因为我想创建一个基本列表组件，而不是静态地设置列名。可能吗？Mat表同时使用DisplayedColumns和DisplayedHeader。两者都是数组，并且都可以在运行时由任何动态组件传入。抓取MatTable的实例并执行此操作。myMatTable.displayedColumns=[“col1”、“col2”]和myMatTable.displayedHeaders=[“动态标题1”、“动态标题2”]感谢您的帮助。那么
matColumnDef
呢？我必须在物料表（mat*表）中设置
defxxx
属性吗？
matColumnDef
和
[matColumnDef]
之间有什么区别？非常感谢您的帮助。关于你的笔记，你是指类似的例子吗？我跟着它走，看起来还可以。对它的任何评论（它也有一个页面）。谢谢你的帖子，我也有兴趣看到这个解决方案。在这种情况下，你建议我使用我在以前的评论中给出的方法。你建议的方法有什么变化吗？
<td mat-cell *matCellDef="let row">
 <span>
   {{ row[displayedColumns[i]] }}
 </span>
</td>

<table
     [id]="tableId"
     matSort
     mat-table
     [(dataSource)]="dataSource"    
  >...

@ViewChild(ParentComponent) matTable:ParentComponent
displayedColumns = ["id", "firstName", "lastName", "updated", "actions"];
columnHeaders = ["ID", "First Name", "Last Name", "Last Updated", "Actions"];

 private setTableColumns() {
      if (this.people.length > 0) {
         this.matTable.displayedColumns = this.displayedColumns;
         this.matTable.columnHeaders = this.columnHeaders;
         this.matTable.dataSource = this.myArray;
      }
   }

<app-material-table
   [dataSoure]="myArray"
   [columnHeaders]="columnHeaders"
   [displayedColumns]="displayedColumns"     
</app-material-table>