Angular:同时使用 *ngFor 和 *ngIf 来引用子元素中的索引值

Question

我想从某些网格车组件中可观察到的数组渲染对象。此外，我想根据组件中的变量将网格卡的数量限制为一个值，即 gridCols*maxRows使用 *ngIf条件检查。

我知道不可能同时使用 *ngFor和 *ngIf同时在同一个元素上。所以我需要使用 <template ngFor ...>包装我的网格卡元素，这些元素将根据 *ngFor 有条件地呈现.鉴于此，我如何引用 index或 content来自 *ngFor 的变量在*ngIf .

<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"

出现这样的错误信息:

There is no directive with "exportAs" set to "index"

Answer 1

您可以通过在 *ngFor 语句中放置 let i = index 来引用 *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>;

希望这对您有所帮助!