mat-selection-list с поисковым фильтром, не сохраняющим выборки после поиска

Question

Я пытаюсь реализовать mat-selection-list, чтобы иметь список символов - но в верхней части вы можете искать / фильтровать символы.Это работает, за исключением случаев, когда вы выбираете символ, ищете другой символ, а затем прекращаете поиск - ваш исходный выбор виден в пользовательском интерфейсе, но модель очищается, пока вы не сделаете другой выбор.

Пример того, что язначит: 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; 
        });
    })
}