角度：使用* 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>;

希望这可以帮助！