Question

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

venuesRunning: any = [13, 14];

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

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

我收到语法错误说明

[Angular]解析器错误：@ 64：53中[i in sitessRunning]的第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>

这是您推荐的Working Sample StackBlitz。

Answer 2

我遗漏了一些东西，但仅仅是将您的代码更改为：

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

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

2 个答案: