Question

我使用角度材质<p-orderList [value]="products" [listStyle]="{'height':'auto'}" header="List of Option Codes" dragdrop="true"> <ng-template let-product pTemplate="item"> <div class="product-item"> <div class="product-list-detail"> <h5 class="p-mb-2">{{product.optionCode}}</h5> </div> </div> </ng-template> </p-orderList>，据我所知，它对诸如MyModel.objects.filter(field__gte=5) # field ≥ 5 MyModel.objects.filter(field__lte=5) # field ≤ 5之类的循环属性具有特殊的表示法，如此Demo所示。为了删除不必要的部分，我尝试对记录进行迭代并动态构建表。我尝试使用mat-table进行迭代，但失败了。那么，使用特殊的语法可能吗？

这是我尝试迭代的部分：

*matCellDef

Answer 1

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

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

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

标头值

<th mat-header-cell *matHeaderCellDef mat-sort-header>
  <span>
    {{ colName }}
  </span>
</th>

使用displayCoumns数组的实际行值。

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

与数据绑定

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

这允许注入数据源，它是任何东西的数组，以及像这样的列标题和dsiplaycolumns的数组：

要重用上面显示的matTable组件，我们可以注入columnHeaders，displayedColumns和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;
      }
   }

或者在html中类似，假设app-material-table是可重用的视图，显示具有上面所示的绑定。

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

注意：每当我看到类似MatTable的东西时，我都会立即考虑创建一个更加简化的可重用视图，该视图将使用它的知识抽象为更简单的东西，如上所示。

迭代角材料表

1 个答案: