Question

我想在引导程序列中循环我的列表。

在第一行中，我想显示三列
在第二行中，我想显示两列
在第三行中，我只想显示一列

代码在下面。

<div *ngFor="let watch of List;let i = index;" >  
    <div [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
         style="text-align:center; background-color:rgb(0, 183, 255);">{{watch.name}}
    </div>
    <div>{{watch.value}}</div>
</div>

它将每一列显示在一行中。没有显示出三，二和一。

Answer 1

“如果我们在ngFor之前定义行，则所有列都显示在一行中。”

如果将[ngClass]添加到要迭代的同一元素，则不会：

<div class="row">  
    <div *ngFor="let watch of List;let i = index;" [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
         style="text-align:center; background-color:rgb(0, 183, 255);">{{watch.name}}
    </div>
    <div>{{watch.value}}</div>
</div>

您也不需要这些rowType字段，则可以执行以下操作：

[ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': (index / 3 < 1)

Answer 2

您好，您在* ngFor-div中缺少类“ row”：

<div class="row" *ngFor="let watch of List;let i = index;" >  
   <div [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
     style="text-align:center; background-color:rgb(0, 183, 255);">{{watch.name}}
</div>
   <div>{{watch.value}}</div>
</div>

Answer 3

像这样的AddType text/javascript .js的div应该像这样在{{watch.value}}内部吗？

<div [ngClass]="

用自举列循环Angular 4的最佳方法？

3 个答案: