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

您好，提前感谢您的帮助

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

黑客的做法是这样的（不是首选，而是工作）：

组件端：

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>

模板端：

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>


{{letter}}{{isodd}


解决您的问题

我建议在组件中使用过滤数组，然后在模板中执行与奇偶相关的逻辑。因此，在这里您可以这样做：

组件。ts

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

如果要应用CSS，可以执行以下操作：

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


你好{{item.status}
请显示代码、您尝试过的内容以及出现问题的地方。您不需要ngIf，请使用ngClass进行升级，请参阅@Alex added codeabove@Turo我不希望ngif高亮显示，它只是用于确定要显示哪些行。正如您所指出的，ngclass将用于高亮显示，但它的索引错误，因为行是hiddenThanks，但我的ngIf条件与仅用于高亮显示的奇偶条件是分开的。有什么建议吗？@aks94，请查看正在运行的演示和更新的答案：）是的，有趣的解决方案。我只是想等一下，以防有一种本地的方式来做这件事。如果没有，我会接受你的回答。谢谢again@aks94可以np@aks94，找到了吗？@aks94您也可以根据条件设置
ngClass
，但是如果您看到我上面的示例，我想显示索引，因为有些行不显示。Vivek的解决方案可以做到这一点，但与其说是本机特性，不如说是一种变通方法。想知道是否有更干净的方法来实现