Angular: mit beiden * ngFor und * ngIf mit Bezug auf Index-Wert in untergeordneten Elementen

Question

Ich möchte Objekte von Array beobachten in einigen Gitter-Auto-Komponenten. Zusätzlich möchte ich die Anzahl von Grid-Karten auf einen Wert basierend auf Variablen in meiner Komponente begrenzen, d. H. gridCols*maxRows unter Verwendung der *ngIf Zustandsprüfung.

Ich weiß, dass es nicht möglich ist, gleichzeitig *ngFor und *ngIf auf demselben Element zu verwenden. Also muss ich <template ngFor ...> verwenden, um meine Rasterkartenelemente zu umhüllen, die basierend auf *ngFor bedingt gerendert werden. In Anbetracht dessen, wie kann ich index oder content Variablen von *ngFor in *ngIf verweisen.

<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

ich so etwas wie dieses

#i="index" 

mit einer solchen Fehlermeldung versucht:

Es gibt keine Richtlinie mit "exportAs" auf „Index "

Answer 1

Sie können auf den Index von * ngFor verweisen, indem Sie let i = index in die Anweisung * ngFor setzen! Beispiel:

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

Stellen Sie sicher, dass Sie definiert gridCols und maxRows als Zahlen in Ihrer Komponente haben!

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

Hoffe, das hilft!