Question

我正在使用*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需要在开始时添加，在每个第3个元素之后添加i % 3 === 0之类的东西就像我在想的那样，我尝试的任何东西都不会使它正确渲染。任何想法都会受到极大的欢迎。

编辑 - 我需要将视图渲染为here上的下方图像，而不是顶部图像

编辑2 - 将演示添加到LINK因为它加载的是它应该看起来的样子，仅作为3个元素工作。如果单击传感器，则使用* ngIf tatements显示它的显示方式。

Answer 1

这是一个利用嵌套// Force floats in '.js_floats_only' inputs $(document).ready(function() { $('.js_floats_only').each(function() { // Store starting value in data-value attribute. $(this).data('value', this.value); }); }); $(document).on('keyup', '.js_floats_only', function() { var val = this.value; if ( val == '-' ) { // Allow starting with '-' symbol. return; } else { if ( isNaN(val) ) { // If value is not a number put back previous valid value. this.value = $(this).data('value'); } else { // Value is valid, store it inside data-value attribute. $(this).data('value', val); } } });强制包裹*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]

您也可以将_.chunk用于此

然后你需要迭代你模板中的新数组，添加你的“div of threes”，然后遍历每个子数组，每个子数组最多包含3个项目：

[[1, 2, 3],[4, 5]]

Answer 2

只需使用该指令提供的index

喜欢

*ngFor="let device of devices ; let i = index"

然后在html中查看*ngIf并添加你的块

喜欢<div ... *ngIf="i % 3 === 0"></div>

Probaly你需要这种方法 Ng-repeat-start in angular2 - aka repeat multiple elements using NgFor

（在AngularJS 1.x中它是一对指令ng-repeat-start ng-repeat-end，现在它是另一种方法）

Answer 3

正如提出的另一个答案一样，将index存储为*ngFor="let device of devices ; let i = 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>

Answer 4

@ChristopherMoore有很好的答案但你需要修改devices_triple函数添加要检查的语句

if (i == this.devices.length){
   arr.push(triple);
}

这将有助于[[1,2,3]，[4,5]]和[[1,2,3]，[4,5,6]，[7]]等案例

Answer 5

如果您使用的是Bootstrap V4.0，则以下链接非常有用。

How to create a new row of cards using ngFor and bootstrap 4

在我的情况下，它适用于我，因为我正在使用Bootstrap V4。

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

5 个答案: