Angular2 ngfor 索引忽略未使用 ngif 显示的行

Question

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

我的 Angular 应用程序中有一个 ngFor 循环，我在其中使用 ngIf 来确定根据特定条件显示哪些行。因为我不能将 ngFor 和 ngIf 放在同一个元素上，所以我的索引会乱序。

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

任何建议都会非常有帮助！

****编辑：添加以下代码作为示例。这就是我想要做的。在此示例中，“a”的行将是蓝色的，“b”和“d”的行将是红色的。 'c' 将被隐藏，因此颜色的顺序将是蓝色、红色、红色，而不是我想要的蓝色、红色、蓝色。我的循环不知道 'c' 没有显示，因此不知道 'd' 是偶数行。

我的 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

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

Answer 2

解决您的问题

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

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 for 循环，然后根据条件使用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>