使用 Angular 管道设置 css class

Question

我有一个 angular material 自动完成功能，允许用户 select 多个选项。用户 selected 的选项必须以红色显示，以表明它们已经 selected。如果用户再次 select 发送它们，该选项将被取消 selected。我知道在模板中使用 class 方法对性能不利，所以我创建了一个管道来实现它。但是，管道仅在组件加载时接收下拉列表中的值。

我该如何解决？

<mat-form-field>
  <input type="text" placeholder="Advisor Name/Port ID" aria-label="advisor-autocomplete" matInput
    [formControl]="advisorName" [matAutocomplete]="advisorAC"/>

  <mat-autocomplete #advisorAC="matAutocomplete"
    (optionSelected)="optionSelected($event)">
    <mat-option *ngFor="let advisor of filteredAdvisors | async" [value]="advisor.advisorPortId">
      <span
        [ngClass]="{'option--selected': advisor.advisorPortId | isSelected:selectedAdvisors}">{{ advisor.advisorFullName + ' (' + advisor.advisorPortId + ')' }}</span>
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

selectedAdvisors 是一个存储 selected options

的数组

@Pipe({
      name: 'isSelected',
    })
    export class IsSelectedPipe implements PipeTransform {
      transform(value: string, selectedValues: string[]): boolean {
        console.log(value);
        console.log(selectedValues);
    
        return selectedValues.includes(value);
      }
    }

我哪里错了？

Answer 1

尝试

@Pipe({
    name: 'isSelected',
    pure: false // this is the key
})

使用 Angular 管道设置 css class

Using Angular pipes to set css class

angular-pipe

angular

angular10