Angular 2 *ngFor - 条件包装元素。就像使用内部有三列的引导行一样，然后添加一个新行

我在用*ngFor这让我很困惑。我正在尝试使用 UIkit，但它也适用于 Bootstrap。

<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需要在开始处和每第三个元素之后添加类似的内容i % 3 === 0这就是我的想法，只是我尝试的任何方法都无法使其正确渲染。任何想法都会受到热烈欢迎。

编辑 - 我需要像下面的图像一样呈现视图here而不是最上面的图片

编辑 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] into [[1, 2, 3],[4, 5, 6]]
• [1, 2, 3, 4, 5] into [[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>