Angular2 ng2-自动完成显示和选择问题

时间:2018-01-26 19:47:53

标签: javascript html angular autocomplete

我已按照此component实施了Angular 2 ngui-auto-complete组件。与此相关的我发现example。但我面临的问题是,在我的自动完成中有多个依赖项。所以对于选择我想要id,但我没有选择id。

另一个面临的问题是我的源代码是一个id为字段之一的对象。通过遵循组件的实现示例,id将显示在下拉列表的括号中。有没有办法在下拉列表中不显示ID?

以下是我自动完成组件的HTML代码:

<input  class="text-uppercase form-control" ngui-auto-complete [(ngModel)]="shipper.cust_name" [source]="shipperNameSource.bind(this)" value-property-name=null  value-formatter="cust_name" min-chars="1" (change)="updateShipperDetails()"/>

我的组件

shipperNameSource = (keyword: any): Observable<any[]> => {
    let url: string = 
      'api/getCustomers?selected='+keyword
    if (keyword) {
      return this.http.get(url)
        .map(res => {
            let json = res.json();
            this.customer.id = json.id;
          return json;
        })
    } else {
      return Observable.of([]);
    }
}

这就是我得到的

enter image description here

1 个答案:

答案 0 :(得分:0)

您的数据没有任何问题。它显示未定义意味着您的数据存在,但您的自动完成映射存在问题。尝试记录api响应并检查您获取实际数据的节点并相应地进行映射。