Блог

Используя угловой мат материала-выберите несколько, как закрыть панель выбора после первого выбора?

По умолчанию мат-выберите несколько сохранить панель выбора открытой, чтобы выбрать дополнительные параметры, мне нужно закрыть после первого выбора.

API предоставляет для этого методы переключения и закрытия, но мне нужно сделать это из typescript в компоненте.

https://stackblitz.com/edit/angular-material-multiple-selection?file=app/app.component.ts

во-первых, нужно ли использовать multi атрибут с mat-select компонентом? Судя по описанию вопроса, вы должны удалить его.

Если вам все еще нужно видеть флажки с помощью multi , но они ведут себя как один компонент выбора, поэтому я могу дать вам свой вариант.

Код здесь — https://stackblitz.com/edit/angular-material-multiple-selection-v7a9kr

Я просто установил ссылку <mat-select> в шаблоне, а в классе добавил вызов

 this.searchUserForm.valueChanges.subscribe(() => {
    this.select.close();
});
 

Метод закрытия, который вы можете найти здесь — https://material.angular.io/components/select/api

Надеюсь, мой ответ был полезен для вас.