如何使用表行索引对角度表行进行类绑定以匹配组件数组的元素

Question

我有一个由角度分量中的数字组成的数组字段。

venuesRunning: any = [13, 14];

我需要根据一种条件来激活HTML模板中表的行上的类，该条件检查该行的索引是否在组件数组中（ venuesRunning ）。 以下是我尝试使用的代码

<tr
  *ngFor="let v of mf.data; index as i" 
  [class.bg-primary]="i in venuesRunning">
  {{ v }}
</tr>

我收到语法错误说明

[Angular]分析器错误：@ 64：53中[i in sitesRunnings]中第3列的意外令牌'in'

我究竟做错了什么？ 有人可以纠正我吗？

Answer 1

试试看：

import { Component } from '@angular/core';

@Component({...})
export class AppComponent {
  venuesRunning: any = [2, 6];
  mf = {
    data: [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6'
    ]
  };

  ngOnInit() {
    this.mf.data = this.mf.data.map((item, index) => ({ display: item, toApplyClass: this.venuesRunning.includes(index) }));
  }

}

并在模板中：

<tr 
  *ngFor="let v of mf.data; index as i"
  [class.bg-primary]="v.toApplyClass">
  {{ v.display }}
</tr>

---

这是供您参考的工作样本StackBlitz 。

Answer 2

我是否缺少某些东西，但仅仅是将您的代码更改为：

 <tr *ngFor="let v of mf.data; index as i" [class.bg-primary]="venuesRunning.indexOf(i) !== -1"> {{ v }} </tr>