Почему возникает ошибка парсинга html?

Question

[Николай Семенов]

Ребята, всем привет. Подскажите почему ошибка при парсинге

<p-multiSelect [options]="chartData[indicators].filter(p => p.axis !=='main')" [(ngModel)]="textAuxiliaryAxis"
          maxSelectedLabels=3 defaultLabel="Выбирите параметр" filterPlaceHolder="Поиск" (onChange)="delGraph($event, 'auxiliary')">
        </p-multiSelect>

не нравится вот это место "chartData[indicators].filter(p => p.axis !=='main')"

Comments

[Антон Швец]

так тебе никто не скажет. Неизвестно что за данные, и как взаимодействуют.
Скрина ошибки тоже нет. На каком месте запинается.
И вообще, есть же stackblitz.com для таких вещей

Answer 1

[Артур]

Привет, Николай Семенов.
Ну ты же на самом деле хочешь ответ, как сделать, чтобы работало?)))
Будет тебе ответ. Но вначале ответ на твой прямой вопрос - ангуляр так не умеет. Туда, в квадратные скобки, можно передать значение выражения, но не само выражение, при этом chartData[indicators] тоже прокатит. Так что так нельзя.

Но если очень хочется то используй Pipe.
Это. кстати, гораздо лучше, чем использовать метод, производительность лучше. Но хозяин барин.

Итак варианты:
1. так себе. Если ты в doCheck() посмотришь сколько раз будет вызван метод getFilteredData(), то будет долго глаз дергаться.

<p-multiSelect [options]="getFilteredData()" [(ngModel)]="textAuxiliaryAxis"
          maxSelectedLabels=3 defaultLabel="Выберите параметр" filterPlaceHolder="Поиск" (onChange)="delGraph($event, 'auxiliary')">
        </p-multiSelect>

2. Вариант хороший и оптимальный

<p-multiSelect [options]="chartData[indicators] | myCoolPipe: 'main' " [(ngModel)]="textAuxiliaryAxis"
          maxSelectedLabels=3 defaultLabel="Выберите параметр" filterPlaceHolder="Поиск" (onChange)="delGraph($event, 'auxiliary')">
        </p-multiSelect>

@Pipe( selector: 'myCoolPipe')
export class MyCoolPipe implements PipeTransform {
  public transform(value: any, filter: string = ''): string {
   if (value) {
       return value.filter(v => v.axis !== filter);
   }
}

Pipe кэширует запросы и не запускается миллиард раз.