材料 2 - 自动完成不显示选项

巴维克·帕特尔

我想实现md-autocompletematerial-2angular它假设的工作方式是当用户开始输入时,它会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笨蛋

感谢帮助。

阿卡什·尤尼亚尔

使filteredDrugsobservable 以您想要的格式从任何服务 (HttpService) 获取数据。

https://blog.bouzekri.net/2016-05-15-angular2-rxjs-simple-paginated-list-with-search-field

您定义的异步*ngFor="let drug of filteredDrugs | async"有助于filterDrugs在运行时获取 的值,因此filteredDrugs需要是一个 Observable。

有用的链接:自动完成教程

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章