網站搜尋

javascript - Angular6 單行多個 ngFor - 如何在一個 ngFor 中傳遞兩個值


在表格的表頭中,我有動態欄位和搜尋排序功能。但對於特定欄位,我需要禁用排序功能。在表格中

<thead>
      <tr class="table-head">
        <th *ngFor="let colName of reportColHeader; let i = index">
          {{colName}}
          <i [class]="sortIcons[colName]" (click)="toggleSort(colName, i)"></i>
        </th>
      </tr>
    </thead>

在 建構函式 中,我傳遞的值是陣列。不是來自伺服器的,只是靜態的。

this.reportColHeader = ['ID', 'LABEL 1', 'LABEL 2', 'More'];

所以結果將如下所示

<tr>
 <th>ID <i></i></th>
 <th>LABEL 1 <i></i></th>
 <th>LABEL 2 <i></i></th>
 <th>More <i></i></th>
</tr>

在這裡,我想從特定的欄位禁用 (排序功能)。
不僅僅是最後一欄或第 n 欄。我假設,可以再多一個陣列類似於

this.reportColHeaderOptions = ['true', 'true', 'false', 'false'];

透過這些值可以顯示或隱藏 <i></i>
那麼我如何將它傳入 ngFor 中呢。
注意: 這裡我不能使用 index,因為 index 會改變。
但我可以按照 this.reportColHeader 和 this.reportColHeaderOpions 的相同順序進行。

答案#1

為什麼你不能使用 index?你可以這樣做:

    <th *ngFor="let colName of reportColHeader; let i = index">
      {{colName}}
      <i *ngIf="reportColHeaderOpions[i]=='true'"></i>
    </th>