Реализуйте фильтр поиска с возможностью выбора нескольких

ProgramBox

Реализуйте фильтр поиска с возможностью выбора нескольких

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#angular #typescript #angular-material #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>

тс:

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

1. testCategories сохраняя только один последний элемент, вы можете добавить его в массив для каждого выбранного элемента. Вы можете поделиться им на Стакблице?

2. Снимите formControlName="testCategories" . Вы используете форму, управляемую шаблоном, а не реактивные формы. Кстати, в вашем коде есть некоторые ошибки: ваш массив categories должен быть массивом строк, если вы хотите использовать фильтр(опция=>опция. в нижнем регистре) или массив объектов, если вы используете category.id в файле .html.

3. Я немного изменил исходный код. В своей функции поиска я использую category.name.toLowerCase(). Я отредактировал сообщение, чтобы сделать его более понятным

4. @akromx Это решено ? Я тоже сталкиваюсь с той же проблемой.

Ответ №1:

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

1. У меня проблема с типом недвижимости. «Аргумент типа» Категория [] » не может быть присвоен параметру типа «Категория»».»

2. Чтобы мы могли помочь вам лучше, нам нужно знать больше данных: Как/где вы объявляете выбранные категории, категории и т. Д. Но, Но сообщение об ошибке, кажется, что вы объявляете выбранные категории как категории, в то время как это должно быть Категорией[]

3. Выбранные категории и категории объявляются как категория[]. Я должен нажать Тип категории, а не категорию[] Я думаю.

Ответ №2:

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>

1. У меня все еще есть проблема.

2. можете ли вы проверить, что selectedCategories содержит после выполнения OnKey

3. Выбранные категории содержат все категории.

4. Вы используете testCategories свой html. Но я не вижу этого в коде ts.

5. TestCategories-это массив категорий, которые я получаю из API и отправляю в него.

Метки: Реализуйте фильтр поиска с возможностью выбора нескольких