Я пытаюсь реализовать md-autocomplete из material-2 в angular. Предполагается, что когда пользователь начнет печатать, он сделает вызов http для получения данных и отобразит их в параметрах. Я могу совершать http-вызовы, но по какой-то причине они не отображаются в options.
HTML :
<md-input-container>
<input mdInput placeholder="Search drug" [mdAutocomplete]="auto" [formControl]="drug" showPanel="false">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
<md-option *ngFor="let drug of filteredDrugs | async" [value]="drug.drugname">
{{ drug.drugname}}
</md-option>
</md-autocomplete>
ТС :
export class DialogAutoComplete {
drug: FormControl;
drugList = [];
filteredDrugs: any;
constructor(public dialogRef: MdDialogRef<DialogAutoComplete>, private getData: GetData) {
this.drug = new FormControl();
//this.filteredDrugs =
this.filteredDrugs = this.drug.valueChanges.startWith(null)
.map(drugname => {
return Array.of(this.getDrugs(drugname)) || [{}];
});
}
getDrugs(val: string) {
console.log("filterdrugs is called ", val);
return val ?
// this.drugList.filter(option => option)
this.getData.getDataForAutoComplete(val).subscribe(
(response: Response) => { console.log(response); return response || []; },
(err) => console.log(err)
)
: [{ drugname: "No Such drug found" }];
}
displayFn(drug) {
console.log("displayfn => ", drug);
return drug == null ? drug : drug.drugname;
}
}
Ниже приведен ответ на вызов http.
Демонстрация plunker с другим вызовом API, но похожим ответом и настройкой. планкер
Цените помощь.
