Angular 如何将Ngx引导typeahead中的自动完成数据绑定到输入字段

我有以下返回数据的类型

<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">

{{model}json}

json格式

{“车辆名称”：“丰田普拉多”，“制造年份”：“2010”，“位置”：“东京”}

如何绑定其他输入字段，以便当用户从自动完成输入中选择vlue时，其他字段将填充该选择中的数据。我希望大家都明白。

你们没有使用（你们正在使用），它们是完全不同的库

您可以使用

selectItem

解决您的问题，该选项可在

ngbTypeahead指令中找到

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">

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

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

您没有使用（您正在使用），它们是完全不同的库

您可以使用

selectItem

解决您的问题，该选项可在

ngbTypeahead指令中找到

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">

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

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

---

我试过你的解决办法，但没用。然而，我找到了一个解决办法。在我的ts上，我有model:any而不是model:any=[]；因此，数据没有以对象数组的形式返回。然后在我的html上，我使用ngModel[（ngModel）]=“model.Vehicle Name”进行绑定，因此我的代码是

和ts

model:any=[]成功了。希望它能帮助别人
我尝试过你的解决方案，但没有奏效。然而，我找到了一个解决办法。在我的ts上，我有model:any而不是model:any=[]；因此，数据没有以对象数组的形式返回。然后在我的html上，我使用ngModel[（ngModel）]=“model.Vehicle Name”进行绑定，因此我的代码是
和ts
model:any=[]成功了。希望它能帮助别人
我想你是在寻找这个：

<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>

默认情况下使用它，您不需要在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});
  }


onSelectItem（事件：NgbTypeaheadSelectItemEvent）：无效{
event.preventDefault（）；
patchValue（{item_id:event.item.id}）；
}

资料来源：
我想你在寻找这个：

<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>

默认情况下使用它，您不需要在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});
  }


onSelectItem（事件：NgbTypeaheadSelectItemEvent）：无效{
event.preventDefault（）；
patchValue（{item_id:event.item.id}）；
}

资料来源：