Why does the html parsing error occur?

Question

Angular

Guys, hello everyone. Tell me why parsing error

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

don't like this place "chartData[indicators].filter(p => p.axis !=='main')"

Answer 1

Hello, Nikolai Semenov .
Well, you really want an answer, how to make it work?)))
There will be an answer for you. But first, the answer to your direct question is that Angular can't do that. There, in square brackets, you can pass the value of the expression, but not the expression itself, while chartData[indicators] will also work. So that's not possible.
But if you really want to use Pipe.
This is. By the way, much better than using the method, the performance is better. But the owner is a gentleman.
So options:
1. so-so. If you look in doCheck() for how many times the getFilteredData() method will be called, your eyes will twitch for a long time.

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

2. The option is good and optimal

<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 caches requests and doesn't run a billion times.