角垫选择列表显示已取消选择的记录为已选择 列表：过滤器：组件：问题：

问题描述

我的html中有一个mat-selection-list，可以通过搜索框实时过滤显示的记录。

列表：

<mat-selection-list #Sets >
    <mat-list-option *ngFor="let set of this.setFileKeys | searchFilter: this.searchTerm" class="connectors-list-item" [selected]="currentSelectedSets.includes(set)" (click)="toggleSet(set)">
        <span>{{set}}</span>
    </mat-list-option>
</mat-selection-list>

过滤器：

• html：

<mat-form-field class="search-bar">
    <mat-icon matPrefix>search</mat-icon>
    <mat-label>Filter</mat-label>
    <input #searchterm type="text" matInput [(value)]="searchTerm" (keyup)="updateSearchTerm(searchterm.value)">
    <button mat-button *ngIf="searchTerm" matSuffix mat-icon-button aria-label="Clear" (click)="searchTerm=''">
        <mat-icon>close</mat-icon>
    </button>
</mat-form-field>

• 管道：

import { Pipe,PipeTransform } from '@angular/core';

@Pipe({
  name: 'searchFilter'
})
export class SearchFilterPipe implements PipeTransform {

  transform(values: string[],term: string): String[] {

    return values.filter(set => set.toLowerCase().includes(term.toLowerCase()))

  }
}

组件：

@Component({
  selector: 'app-connectors',templateUrl: './connectors.component.html',styleUrls: ['./connectors.component.scss']
})
export class ConnectorsComponent implements OnInit {
  public currentSetList = null;
  public setFileKeys = null;
  public currentSelectedSets = null;
  public searchTerm = null;

  constructor(
    private configService: ConfigService
    ) { }

  ngOnInit(): void {
    this.currentSetList = this.configService.getSets()
    this.currentSelectedSets = []
    this.searchTerm = ""
    this.setFileKeys = Object.keys(this.currentSetList)
  }

  public toggleSet(set:any){
    if (this.currentSelectedSets.includes(set)){

      var index: number = this.currentSelectedSets.indexOf(set)
      this.currentSelectedSets.splice(index,1)

    } else {
      this.currentSelectedSets.push(set)
    }
  }

  public updateSearchTerm(term: string){
    this.searchTerm = term;
  }

问题：

如果您过滤列表，然后进行选择，那么在清除过滤器文本时，UI将显示所有被过滤为选定内容的记录。尽管它们没有出现在“ currentSelectedSets”列表中。

这里的任何帮助都会很棒。如果有一种标准的方法可以实现我在这里要做的事情，请指出这一方向，也许我的实现不是预期的方法。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）