Angular：使用* ngFor和* ngIf參照子元素中的索引值

我想在某些網格汽車組件中從數組可見的數組渲染對象。此外，我想根據我的組件中的變量（即gridCols*maxRows，使用*ngIf條件檢查）將網格數限制爲一個值。Angular：使用* ngFor和* ngIf參照子元素中的索引值

我知道在同一個元素上同時使用*ngFor和*ngIf是不可能的。所以我需要使用<template ngFor ...> 來包裝我的網卡元素，這些元素將根據*ngFor進行有條件渲染。鑑於此，我如何可以參考或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>

UPDATE

我已經試過這樣的事情

#i="index"

這樣的錯誤消息：

沒有指令與「EXPORTAS」設置爲「指數「

來源

2017-05-08 Michał Ziobro

我建議限制最大行的切片管道（或實際上最大的項目）https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html –

沒關係，但我想知道我怎麼可以引用子元素中的ngFor循環的索引和內容變量，它也可能是有用的 –

我不知道''是什麼。如果它是您構建的組件，只需添加輸入如'@Input（）index：int; @Input（）content：SomeType;'然後像''grid-card * ngIf =「i

您可以通過在* 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>;

希望這會有所幫助！

來源

2017-06-22 16:08:43 ob1

Angular：使用* ngFor和* ngIf參照子元素中的索引值

回答

相關問題