web-dev-qa-db-ja.com

ngForと並べ替えを使用したマットテーブル

Ngforのマットアコーディオンがあります。パネルをクリックすると、テーブルが表示されます。
マットソート以外はすべて期待どおりに機能し、最初のテーブルのみをソートします。
テンプレート参照変数を各テーブル内に配置する必要があると読みましたが、どうすれば動的に実行できますか？またはそれを達成するための他の方法があります。
これが私のコードです：

  <mat-accordion style="width: 80%">
<mat-expansion-panel *ngFor="let customer of customers; let i = index" (opened)="openPanel(customer);">
  <mat-expansion-panel-header>
    <mat-panel-title>
      {{customer.name}}
    </mat-panel-title>
    <mat-panel-description>
      <span style="text-align:center">{{" Active Calls: " + customer.active}}</span>
      <span style="margin-left: 100px;">{{" Talking Calls: " + customer.talking}}</span>
    </mat-panel-description>
  </mat-expansion-panel-header>
  <table #HERE-I-NEED-TO-PUT-DYNMIC-ID mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container *ngFor="let column of tableColumns;" matColumnDef="{{column.field}}">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.name}} </th>
      <td mat-cell *matCellDef="let element">
         <span *ngIf="column.field !== 'answered'"> {{element[column.field]}} </span>
         <span *ngIf="column.field === 'answered' && element[column.field] > 0">{{getTime(element[column.field] * 1000) | date: 'HH:mm:ss'}}</span>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</mat-expansion-panel>

ありがとう。

angularangular-material-6
3
Avihay m

角かっこを使用して問題を解決しました。
以下のコード。

<ng-container *ngFor="let col of cols" [matColumnDef]="col">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ col }} </th>
    <td mat-cell *matCellDef="let element"> {{ element[col] }} </td>
</ng-container>
5
chifangjang