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参照子元素中的索引值

回答

相关问题