带有搜索过滤器的 mat-selection-list 在搜索后不保留选择

Question

我正在尝试实现一个mat-selection-list 来获得一个字符列表——但在顶部，您可以搜索/过滤字符。这是有效的，除非您选择一个字符，搜索另一个字符，然后停止搜索 - 您的原始选择在 UI 中可见，但模型会被清除，直到您进行另一个选择。

我的意思示例：https://stackblitz.com/edit/angular-yo2o9o

我可以想出一种方法来解决这个问题——通过手动从数组中推送/删除；但这不会保留在列表中选择的顺序，这很重要。

有什么想法可以在不采取一些粗略的解决方法的情况下解决这个问题吗？

Answer 1

不要使用 ngModel 和 ngModelChange - 使用 selectionChange 并自己管理模型。要管理排序问题，只需过滤原始数组而不是推送/删除：

<mat-selection-list #heroes
        (selectionChange)="onSelectedOptionsChange()"
        [disableRipple]="true">
    <mat-list-option *ngFor="let hero of (overwatchHeroes | heroSearch:heroSearch.value)"
            (click)="hero.selected = !hero.selected;"
            [selected]="hero.selected"
            [value]="hero">
        {{hero.name}} - {{hero.selected}}
    </mat-list-option>
</mat-selection-list>

public onSelectedOptionsChange() {
    setTimeout(() => {
        this.selectedLongListHeroes = this.overwatchHeroes.filter(hero => {
            return hero.selected; 
        });
    })
}