搜索过滤器的mat-selection-list在搜索后不保留选择 [英] mat-selection-list with search filter not keeping selections after a search

问题描述

我正在尝试实现mat-selection-list以具有字符列表-但是在顶部，您可以搜索/过滤字符.除了您选择一个字符，搜索另一个字符然后停止搜索之外，此方法都是有效的-您的原始选择在UI中可见，但是模型将被清除，直到您进行另一个选择为止.

I'm attempting to implement a mat-selection-list to have a list of characters--but at the top, you can search/filter characters. This is working except when you select a character, search for another character, then stop searching--your original selection is visible in the UI, but the model is cleared until you make another selection.

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

我可以想出一种方法来解决这个问题，方法是手动从阵列中推入/移出；但这并不会在列表中保持选定的顺序，这很重要.

I can come up with a way to fix this--by manually pushing/removing from an array; but this doesn't keep the order selected in the list and that's important.

有什么想法可以解决这些问题，而无需采取一些粗略的解决方法?

Any ideas how this can be solved without some gross workaround?

推荐答案

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

Don't use ngModel and ngModelChange - use selectionChange and manage the model yourself. To manage the ordering problem, just filter the original array instead of pushing/removing:

<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; 
        });
    })
}

这篇关于搜索过滤器的mat-selection-list在搜索后不保留选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！