角：子要素のインデックス値を参照して* ngForと* ngIfの両方を使用

Question

レンダリングオブジェクトをいくつかのグリッドカーコンポーネントで観測可能にしたいと思います。また、コンポーネントの変数に基づいてグリッドカードの数をgridCols*maxRowsの*ngIfの条件チェックを使用して数値に制限したいとします。

*ngForと*ngIfの両方を同じ要素に同時に使用することはできません。だから*ngForに基づいて条件付きでレンダリングされるグリッドカードの要素をラップするには<template ngFor ...> を使用する必要があります。これを考えると、indexまたはcontentの変数を*ngForから*ngIfにどのようにすることができますか。何のディレクティブがに設定された "EXPORTAS" ではありません

「インデックス：私は、このようなエラーメッセージを表示して、この

#i="index" 

のようなものを試してみました

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

UPDATE "

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

希望します。