1

我正在尝试为多个 mat-select 实现搜索过滤器，但是在搜索和选择时遇到了问题。

我的搜索功能工作正常。但是，如果我搜索某些内容，选择它，然后搜索其他内容并选择它，则只保留最后选择的项目。这是因为我的搜索没有被重置，但我不知道该怎么做。

当我关闭垫选择面板时，我试图清除我的搜索输入，但它似乎不起作用。

HTML：

<mat-select formControlName="testCategories" [(ngModel)]="testCategories"
    multiple>
    <input matInput class="search-input" type="text" placeholder="Search..."
        (keyup)="onKey($event.target.value)" (keydown)="$event.stopPropagation()">
    <mat-select-trigger>
        <mat-chip-list>
            <mat-chip *ngFor="let category of testCategories" [removable]="true"
                (removed)="removeCategory(category)">
                <div class="chip-text">{{ category.name }}</div>
                <mat-icon class="icon-delete-circle-reverse" matChipRemove></mat-icon>
            </mat-chip>
        </mat-chip-list>
    </mat-select-trigger>
    <ng-container *ngFor="let category of selectedCategories">
        <mat-option [value]="category.id">
            {{ category.name }}
        </mat-option>
    </ng-container>
</mat-select>

TS：

    onKey(value: string) {
        this.selectedCategories = this.search(value);
    }

    search(value: string) {
        this.filter = value.toLowerCase();
        return this.categories.filter(option =>
            option.name.toLowerCase().startsWith(this.filter));
    }
4

2 回答 2

0 
 onKey(value: string) {
        this.selectedCategories.push(this.search(value));
    }
于 2021-10-05T15:37:38.600 回答
0

该search(value: string)方法返回一个数组。您可以尝试以下方法

onKey(value: string) {
    this.selectedCategories.concat(this.search(value));
}

HTML：

<mat-select formControlName="testCategories" [(ngModel)]="testCategories"
multiple>
<input matInput class="search-input" type="text" placeholder="Search..."
    (keyup)="onKey($event.target.value)" (keydown)="$event.stopPropagation()">
<mat-select-trigger>
    <mat-chip-list>
        <mat-chip *ngFor="let category of selectedCategories" [removable]="true"
            (removed)="removeCategory(category)">
            <div class="chip-text">{{ category.name }}</div>
            <mat-icon class="icon-delete-circle-reverse" matChipRemove></mat-icon>
        </mat-chip>
    </mat-chip-list>
</mat-select-trigger>
<ng-container *ngFor="let category of selectedCategories">
    <mat-option [value]="category.id">
        {{ category.name }}
    </mat-option>
</ng-container>
于 2021-10-06T07:58:48.923 回答