我正在使用*ngFor，这让我感到困惑。我正在尝试使用 UIkit，但它也适用于引导程序。
<div *ngFor="let device of devices" >
<div class="uk-child-width-expand@s uk-text-center" uk-grid>
<div class="uk-card uk-card-secondary uk-card-hover uk-card-body uk-transform-origin-bottom-right uk-animation-scale-up">
<h2 class="uk-h2">{{ device.name }}</h2>
<button class="uk-button uk-button-default" (click)="toggleDevice(device)" ng-disabled="device.onStatus == true">On</button> <!-- In final app add: ng-disabled="!device.onStatus" -->
<button class="uk-button uk-button-default" (click)="toggleDevice(device)" ng-disabled="device.onStatus == false">Off</button> <!-- In final app add: ng-disabled="device.onStatus" -->
</div>
</div>
</div>
div class="uk-child-width-expand@s uk-text-center" uk-grid元素需要在开始时添加，在每个第 3 个元素之后，我的想法是i % 3 === 0，只是我尝试的任何内容都不会使其正确呈现。任何想法都会受到极大的欢迎。
编辑 - 我需要让视图像下面的图像一样呈现在这里而不是顶部图像
编辑 2 - 将演示添加到 LINK 加载时它应该是什么样子，仅作为 3 个元素工作。如果单击传感器，这就是使用 *ngIf 属性显示它的方式。
这是一个利用嵌套*ngFor强制包装 3 个项目div
首先，您需要一个getter将数组分成三部分。
get device_triples(){
let arr = [];
let triple= [];
for (let i = 1; i <= this.devices.length; i++) {
triple.push(this.devices[i - 1]);
if (i % 3 === 0) {
arr.push(triple);
triple= [];
}
}
if(triple.length > 0){
arr.push(triple);
}
return arr;
}
此函数将转换：
[1, 2, 3, 4, 5, 6][[1, 2, 3],[4, 5, 6]][1, 2, 3, 4, 5][[1, 2, 3],[4, 5]]
您也可以为此使用_.chunk
然后，您需要遍历模板中的新数组，添加"三人组"，然后遍历每个子数组，每个子数组最多包含 3 个项目：
<div *ngFor="let triple of device_triples">
<div class="uk-child-width-expand@s uk-text-center" uk-grid>
<div *ngFor="let device of triple">
<h2 class="uk-h2">{{ device.name }}</h2>
...
<div>
</div>
</div>
只需使用该指令提供index
喜欢
*ngFor="let device of devices ; let i = index"
然后在 HTML 中只需检查*ngIf并添加您的块
喜欢<div ... *ngIf="i % 3 === 0"></div>
可能需要这种方法 Ng-repeat-start in angular2 - 又名使用 NgFor 重复多个元素
(在 AngularJS 1.x 中是一对指令ng-repeat-startng-repeat-end，现在是另一种方法)
正如另一个答案所建议的那样，使用类似*ngFor="let device of devices ; let i = index"的东西存储index可以让您跟踪正在迭代的集合中的索引。
然后，据我了解，您需要正确，您希望有条件地将class应用于元素，即第一个和每三分之一。如果你真的想要一个像T,F,F,T,F,F,T,F,F,T,...这样的系列，那么你可以使用i % 3 === 0来制作它，并有条件地应用一个class类似的东西
<div (class)="i % 3 === 0 ? 'class-to-apply' : ''">
这将允许您有条件地向第一个元素添加一个类，之后每第三个元素添加一个类。
相反，如果您希望基于索引使用不同的html，则必须使用ngIf分支并有两个html片段来处理这两种情况。以下几行
<div *ngIf="i % 3 === 0">first case</div>
<div *ngIf="i % 3 !== 0">second case</div>
@ChristopherMoore有很好的答案，但你需要修改devices_triple函数 添加要检查的语句
if (i == this.devices.length){
arr.push(triple);
}
这将在[[1,2,3]，[4,5]]和[[1,2,3]，[4,5,6]，[7]]等情况下有所帮助
如果您使用的是 Bootstrap V4.0，下面的链接很有用。
如何使用 ngFor 和引导程序创建新卡片行 4
就我而言，它对我有用，因为我使用的是 Bootstrap V4。