угловой материал 2 автозаполнение асинхронный

64
6

У меня есть угловой 4 и угловой материал 2. Я хочу использовать автозаполнение. В первой версии угловой материал автозаполнения поддерживал асимметричную работу.

https://material.angularjs.org/latest/api/directive/mdAutocomplete#asynchronous-results

Все было здорово и очень удобно. Во второй версии я попытался найти руководство, но ничего не нашел.

Угловые 2 материала, автозаполнение с удаленными данными

Как правильно использовать компонент автозаполнения из Angular2 MaterialDesign?

Это не считается. Они обращаются к службе onInit. Мне нужно это на клик, как в первой версии. Как это сделать?

спросил(а) 2021-01-19T13:49:40+03:00 6 месяцев, 1 неделя назад
1
Решение
78

Я не уверен, что вы подразумеваете под "Они обращаются к службе onInit"? Если вы хотите сделать вызов событием click, переместите блок кода в функцию, вызываемую при click. Те примеры, которые вы указали в вопросе, вызывают onInit из-за этой строки .startWith(null), чтобы пользователь мог видеть данные, как только они нажимают поле ввода.

Вот пример:

HTML:

<md-input-container>
<input mdInput [mdAutocomplete]="auto"
placeholder="Select Name"
[formControl]="myCtrl"
(click)="getData()">
</md-input-container>
...
...
...

TS:

myCtrl: FormControl;

filteredItems: any;

items;

constructor(private dataService: DataService) {
this.myCtrl = new FormControl();
}

ngOnInit(){

}

getData(){
this.dataService.fetchData()
.subscribe(
(data) => {
this.items = data.customers;
this.filteredItems = this.myCtrl.valueChanges
.startWith(null)
.map(i => i && i === 'object' ? i.name : i)
.map(name => name ? this.filterItem(name) : this.items.slice());

}
);
}

filterItem(name) {
return this.items.filter(item => new RegExp('^${name}', 'gi').test(item.name));
}

Демо-версия Plunker

Надеюсь это поможет!

ответил(а) 2021-01-19T13:49:40+03:00 6 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема