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

Question

您好，在此先感谢您的帮助。

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

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

任何建议都会很有帮助！

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

我的 ngIf 条件与仅用于突出显示的 odd/even 条件是分开的。

<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

针对你的问题

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

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>

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

Angular2 ngfor index which ignores rows not shown using ngif

angular-ng-if

ngfor

angular