Angular 角度：参照子元素中的索引值同时使用*ngFor和*ngIf

我想从一些网格汽车组件中可以观察到的阵列中渲染对象。此外，我希望使用

*ngIf

条件检查将网格卡的数量限制为基于组件中变量的值，即

gridCols*maxRows

我知道不可能在同一个元素上同时使用

*ngFor

和

*ngIf

。所以我需要使用

包装将根据

*ngFor

有条件呈现的网格卡元素。鉴于此，我如何从

*ngIf

中的

*ngFor

引用

索引

或

内容

变量

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

出现以下错误消息：

没有将“exportAs”设置为“index”的指令

---

您可以通过将

let i=index

放入*ngFor语句中，从*ngFor引用索引！ 例如：

确保已将gridCols和maxRows定义为组件中的数字

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

gridCols:number=；
maxRows:number=；

---

希望这有帮助

我建议使用切片管道来限制最大行数（或实际上是最大项数）。这没关系，但我也想知道如何在子元素中引用ngFor循环的索引和内容变量。它也可能有用。我不知道

是什么。如果它是您构建的组件，只需添加输入，如

@Input（）index:int@Input（）内容：SomeType一样传递它，它应该可以工作
#i=“index”
已经过时，并且在将近一年的时间里不受支持
let-i=“index”
是正确的格式。您也可以使用
而不是
来使用更常见的语法，但结果相同。尝试通过在

<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:number = <your number>;
maxRows:number = <your number>;