Как сделать привязку класса к угловой строке таблицы, используя индекс строки таблицы, чтобы соответствовать элементам массива компонентов

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] Ошибка синтаксического анализатора: неожиданный токен 'in' в столбце 3 в [i invenuesRunning] в @ 64: 53

Что я делаю не так?Кто-нибудь может меня поправить?

Answer 1

Я что-то упустил, но недостаточно просто изменить код на:

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

Answer 2

Попробуйте:

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 для вашей ссылки.