Как привязать данные автозаполнения от Ngx- bootstrap к полям ввода

Question

У меня есть следующий 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">

в json формате {"Vehicle Name": "TOYOTA PRADO","MANUFACTURED YEAR":"2010", "LOCATION":"TOKYO"}

Как я могу связать другие поля ввода, чтобы при выборе пользователем vlue из автозаполнения, остальные поля заполняются данными из этого выбора. Надеюсь, ясно, ребята.

Answer 1

Я попробовал ваше решение, но оно не сработало. Однако я нашел решение. На моем TS у меня была модель: любой вместо модели: любой = []; поэтому данные не возвращались в виде массива объектов. затем на моем html я связываюсь, используя ngModel [(ngModel)] = "имя модели.автомобиля". Итак, мой код был <input [(ngModel)]="model.Vehicle Name" class="form-control" formControlName="vehiclename" name="vehiclename" type="text"/> и ts model: any = [];, и это сработало. Надеюсь, это поможет кому-то

Answer 2

Вы не используете NGX- Bootstrap (вы используете NG Bootstrap), это совершенно разные библиотеки.

Вы можете решить свои проблема с использованием selectItem события , которое доступно на 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...
}