角垫选择列表在搜索输入中无法正常工作

Question

在angular5项目上工作，我正在使用角度材料选择列表，但顶部输入文本搜索无法正常工作。

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

脚步 ：

1. 从清单中选择“运动鞋”和“鹿皮鞋”
2. 搜索中显示“ clo”
3. 从输入框中删除文本。
4. 请参阅选择列表，先前选择的选项会自动取消选择，这不会发生。

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

Answer 1

您可以简单地将typesOfShoes字符串数组扩展为其中具有selected属性的对象数组，然后自己处理逻辑。

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

我不知道材料垫选择列表组件的工作方式，但我确定您知道如何使用（click）指令来更改shoe.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>