Question

我有一个在ngFor

中使用的iterable

<div *ngFor="let item in items">{{item.name}}</div>

我还有一个方法getNumberOfSpecialItems（），它返回特殊项目的数量，比如N.

我想申请一个班级＆＃34;特别＆＃34;到ngFor的前N个div。做这个的最好方式是什么？

Answer 1

嗯，我认为应该这样做：

<div *ngFor="let item in items; let i = index" [ngClass]="{'special': i < getNumberOfSpecialItems()}">{{item.name}}</div>

其中 i - 列表中的项目索引。

可能最好将 getNumberOfSpecialItems（）分配给控制器中的变量并使用此变量，因为 NgClass 是观察者，在上面的情况下每次迭代都会调用函数。

更新：Angular 5中有多种方法可以有条件地绑定类参数，您可以找到here。

Answer 2

当设置类取决于NgClass评估时，我通常更喜欢属性绑定而不是boolean指令：

<div *ngFor="let item in items; index as i"
      [class.special]="i < getNumberOfSpecialItems()">
{{item.name}}
</div>

在模板中，i是index指令公开的NgForOf值

Answer 3

我使用了这种方法：

<ng-container *ngFor="let item of items; index as count">
    <ngcontainer *ngIf="count<getNumberOfSpecialItems() else simple">
      <div ngClass="special"> {{item.name}} </div>
</ng-container>
   <ng-template #simple>
      <div> {{item.name}} </div>
   <ng-template>
</ng-container>`

快乐编码：）

如何使用Angular 2向迭代中的某些元素添加类

3 个答案: