角度：使用* ngFor和* ngIf引用子元素中的索引值

Question

我想在某些網格車組件中呈現可觀察到的數組對象 。 另外，我想根據組件中的變量（即使用*ngIf條件檢查的gridCols*maxRows將網格卡的數量限制為一個值。

我知道不可能在同一元素上同時使用*ngFor和*ngIf 。 所以我需要使用<template ngFor ...>包裝我的網格卡元素，這些元素將根據*ngFor有條件地呈現。 鑒於此，我如何從*ngFor中的*ngIf引用index或content變量。

<template ngFor let-content [ngForOf]="contentObjectsObservable | async" let-i="index" [ngForTrackBy]="trackByFn">
    <grid-card *ngIf="i < gridCols*maxRows" [content]="content" [style.width.%]="gridCardWidth"></grid-card>
</template> 

更新

我已經嘗試過這樣的事情

 #i="index"

與這樣的錯誤信息：

沒有將“ exportAs”設置為“ index”的指令

Answer 1

您可以通過將let i = index放在* ngFor語句中來從* ngFor引用索引！ 例：

<div *ngFor="let item of items; let i = index">
    <div *ngIf="i < (gridCols * maxRows)" class="row">
    <grid-card [content]="content" [style.width.%]="gridCardWidth"></grid-card>
    </div>
</div>

確保已在組件中將gridCols和maxRows定義為數字！

gridCols:number = <your number>;
maxRows:number = <your number>;

希望這可以幫助！