Angular 垫选择列表在搜索输入时无法按预期工作

Question

在 angular5 项目中工作，我使用 Angular Material 选择列表，该列表在顶部输入文本搜索时无法按预期工作。

这是 stackblitz 上的代码。 https://stackblitz.com/edit/angular-i3pfu2-xgembc

步骤:

1. 从列表中选择“运动鞋”和“莫卡辛鞋”
2. 使用文字“clo”进行搜索
3. 删除输入框中的文本。
4. 查看选择列表，之前选择的选项会自动取消选择，这是不应该发生的。

我们如何保留列表中先前选择的选项？提前致谢。

Answer 1

您可以简单地将 typesOfShoes 字符串数组扩展为其中包含所选属性的对象数组，并自行处理逻辑。

typesOfShoes = [{name:'Boots',selected:false}, {name:'Clogs',selected:false}, {name:'Loafers',selected:false}, {name:'Moccasins',selected:false}, {name:'Sneakers',selected:false}];

我不知道 Material mat-selection-list 组件是如何工作的，但我确信你知道如何使用 (click) 指令来更改鞋.selected: (shoe.selected = !show.selected)

编辑

为了完整性:

<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes  | LockFilter: query" [value]="shoe" (click)="shoe.selected = !shoe.selected" [selected]="shoe.selected">
    {{shoe.name}}
  </mat-list-option> 
</mat-selection-list>