Question

您好，并提前感谢您的帮助。

我在我的角度应用程序中有一个ngFor循环，我在其中使用ngIf来确定基于特定条件显示哪些行。因为我不能把ngFor和ngIf放在同一个元素上，所以我的索引不按顺序。

我需要正确的索引（或奇数和偶数），因为我想以交替的方式突出显示行。

任何建议都会非常有用！

****编辑：在下面添加代码作为示例。这就是我想要做的事情。在这个例子中，＆＃39; a＆＃39;将是蓝色的，并且＆＃39; b＆＃39;并且＆＃39; d＆＃39;将是红色的。＆＃39; C＆＃39;将隐藏，所以颜色的顺序将是蓝色，红色，红色而不是蓝色，红色，蓝色，如我所愿。我的循环并不知道＆＃39; c＆＃39;没有显示，所以不知道＆＃39; d＆＃39;是一个偶数行。

我对ngIf的条件与奇数/偶数条件分开，后者仅用于突出显示。

<ng-container *ngFor="let letter of ['a','b','c','d']; let odd = odd ; let even = even">
 <ng-container *ngIf="letter != 'c">
  <div ngClass="{{odd ? 'class-red' : 'class-blue'}}><p>{{a}}</p></div>
 </ng-container>
</ng-container>

Answer 1

为您的问题

我建议将过滤后的数组放入组件中，然后在模板中执行与奇数/偶数相关的逻辑。所以在这里你可以这样做：

<强> component.ts

private _items: any[];
get Items() {
  return this._items.filter(item => <your condition>);
}

这只是一个可以根据您的要求优化此代码的方向。

<强> HTML

<ng-container *ngFor="let item of Items; let i = index">
    <div [ngClass]="{'even': i%2 == 0}">{{item.name}}</div>
</ng-container>

以前的解决方案

您可以使用ng-container进行循环，然后根据条件使用hide/show div

<ng-container *ngFor="let item of Items">
    <div *ngIf="item.isValid">Hello {{item.status}}</div>
</ng-container>

如果您想申请CSS，可以执行以下操作：

<ng-container *ngFor="let item of Items; let i = index">
    <div [ngClass]="{'even': i%2 == 0}">Hello {{item.status}}</div>
</ng-container>

Answer 2

Hacky的做法是这样的（不是首选的，但有效）：

组件方：

isodd = false;

public get changeOdd(){
    this.isodd = !this.isodd;
    return true;
}

模板面：

<ng-container *ngFor="let letter of ['a','b','c','d']">
 <ng-container *ngIf="letter != 'c' && changeOdd">
  <div ngClass="{{isodd ? 'class-red' : 'class-blue'}}">
    <p>{{letter}} {{ isodd }}</p>
  </div>
 </ng-container>
</ng-container>

<强> WORKING DEMO

Angular2 ngfor索引忽略使用ngif

2 个答案: