我正在尝试md-autocomplete实现material-2in angular。它假设的工作方式是当用户开始输入时，它会http调用以获取数据并显示在选项中。我能够进行 http 调用，但由于某种原因它不会显示在options.
网页：
<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>
TS：
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电话的回应。
具有不同 api 调用但类似响应和设置的演示plunker 。笨蛋
感谢帮助。