角度解析错误：在需要表达式的地方进行插值（{{}}）

Question

我有一个要使用芯片过滤的对象列表。模板代码如下所示。

  <mat-chip-list>
    <mat-chip selected="filterValue=='All'" (click)="filterBy('All')">All items</mat-chip>
    <mat-chip *ngFor="let item of items" selected="filterValue=='{{item.name}}'"
    (click)="filterBy(item.name)">
    {{item.name}}
    </mat-chip>
  </mat-chip-list>

我在component.ts中有一个名为filterValue的属性，默认值设置为'All'，并且有一个filterBy方法，当您单击芯片时，该方法仅更改filterValue的值。 我期望发生的事情是selected属性将对表达式求值并返回适当的值（true或false）。但是，就目前而言，它始终返回true。

如果我将所选属性用方括号括起来，则会出现错误：[Angular] Parse Error: Got interpolation ({{}}) where expression was expected...

我尝试使用[class.active]="filterValue=='{{item.name}}'"，但也会返回[Angular] Parse Error: Got interpolation ({{}}) where expression was expected...

我知道{{}} 从不与[prop]="..."或(event)="..."一起使用，但是我不太想知道如何解决我的特定问题。我想知道如何同时使用mat-chip的selected属性和[class.active]方法。您的帮助将不胜感激。