如何将 Ngx-bootstrap typeahead 中的自动完成数据绑定到输入字段答案

【问题标题】：How to bind autocomplete data from Ngx-bootstrap typeahead to input fields如何将 Ngx-bootstrap typeahead 中的自动完成数据绑定到输入字段
【发布时间】：2020-03-13 19:06:33
【问题描述】：

我有以下返回数据的预输入

<input [(ngModel)]="model" [class.is-invalid]="searchFailed" [inputFormatter]="inputFormatBandListValue"
                 [ngbTypeahead]="search" [resultFormatter]="resultFormatBandListValue" class="form-control"
                 id="typeahead-http"
                 name="Search" placeholder="Search" type="text" value="search"/>
          <!--              <small *ngIf="searching" class="form-text text-muted">searching...</small>-->
          <img *ngIf="searching" alt="Loading Icon" src="assets/img/user/loading.gif">
          <div>
            <p>{{model | json}}</p>
          </div>
<input  class="form-control" id="manufyear" name="manufyear" type="text">
<input  class="form-control" id="location" name="location" type="text">

json格式{"Vehicle Name": "TOYOTA PRADO","MANUFACTURED YEAR":"2010", "LOCATION":"TOKYO"}

如何绑定其他输入字段，以便当用户从自动完成输入中选择一个 vlue 时，其他字段会填充来自该选择的数据。我希望是清楚的家伙。

【问题讨论】：

标签： angular angular-ngmodel

【解决方案1】：

你没有使用NGX-Bootstrap（你使用的是NG Bootstrap），它们是完全不同的库。

您可以使用selectItem event 解决您的问题，ngbTypeahead Directive 上提供此服务

HTML：

<input [(ngModel)]="model" 
       [class.is-invalid]="searchFailed" 
       [inputFormatter]="inputFormatBandListValue"
       [ngbTypeahead]="search" 
       [resultFormatter]="resultFormatBandListValue" 
       class="form-control"
       id="typeahead-http"
       name="Search"
       placeholder="Search" 
       type="text"
       (selectItem)="onItemSelect($event)" <--------------- add this
       value="search" />
<img *ngIf="searching" alt="Loading Icon" src="assets/img/user/loading.gif">
<div>
    <p>{{model | json}}</p>
</div>
<input  class="form-control" id="manufyear" name="manufyear" type="text">
<input  class="form-control" id="location" name="location" type="text">

TS：

onItemSelect(event: NgbTypeaheadSelectItemEvent) {
    const selectedObj = event.item // this is the selected object from the typeahead

    // now you can set the other inputs values here...
}

【讨论】：

【解决方案2】：

我已经尝试过您的解决方案，但没有奏效。但是我找到了解决方案。在我的 ts 上，我有 model:any 而不是 model:any = [];所以数据没有作为对象数组返回。然后在我的 html 上，我使用 ngModel [(ngModel)]="model.Vehicle Name" 进行绑定，所以我的代码是 <input [(ngModel)]="model.Vehicle Name" class="form-control" formControlName="vehiclename" name="vehiclename" type="text"/> 和 ts model: any = []; 并且它有效。希望它可以帮助某人

【讨论】：

【解决方案3】：

我想你正在寻找这个：

<div class="form-group">
  <label for="ArtistName">Band Name:</label>
  <input id="ArtistName" type="text"
         name="ArtistName"
         class="form-control"                     
         [(ngModel)]="album.Artist.ArtistName"
         [ngbTypeahead]="search"                     
         [resultFormatter]="resultFormatBandListValue"
         [inputFormatter]="inputFormatBandListValue"  <==  THIS
         #instance="ngbTypeahead"                     
    />
</div>

在ts中

  inputFormatBandListValue(value: any) {
    // do what ever you want
    // now you can set the other inputs values here...
    return value.yourAttribut; // this return what to show in imput
  }

默认使用它，您不需要在 HTML 中包含它（如果您不想更改它）

希望它有所帮助，即使我“战斗”有点晚了

问候

编辑：问题出在 inputFormatter 上，但它仍然可能对某人有所帮助。似乎 [resultFormatter] 不起作用。一种解决方法是：

<input type="text" formControlName="item_id" (selectItem)="onSelectItem($event)"
               [ngbTypeahead]="search" [resultFormatter]="formatter"/>

  onSelectItem(event: NgbTypeaheadSelectItemEvent): void {
    event.preventDefault();
    this.dataForm.patchValue({item_id: event.item.id});
  }

来源： https://github.com/ng-bootstrap/ng-bootstrap/issues/611#issuecomment-313939870

【讨论】：