angular - Ngx引导类型提前值文本分隔？

Question

我使用 ngx bootstrap 来实现预先输入的下拉菜单。

ngxbootstrap

我已经从文档中创建了一个示例，但我无法提供价值并显示不同的文本。

我有一个类似的清单

{ id: 1, name: 'Alabama', value:"1", region: 'South' },
{ id: 2, name: 'Alaska abc', value:"2", region: 'West' },
{ id: 3, name: 'Arizona cdf', value:"3", region: 'West' },
{ id: 4, name: 'Arkansas efg', value:"4", region: 'South' },     
{ id: 5, name: 'Alaska2 hij', value:"5", region: 'West' }

当用户在下拉菜单中选择时，它应该显示名称，但在 ng 模型中我需要像 1、2、3 这样的值

但是使用这个 ngx bootstrap 我无法将这两者分开。

我什至尝试过使用 ngx-template，但在 ui 的最后它会显示值而不是文本

我在 stackblits 中的例子

Answer 1

使用 ngx Bootstraps onSelect 方法获取选定值的对象。示例：https ://stackblitz.com/run

change in ts :

    import { Component } from '@angular/core';
    import { FormControl, FormGroup } from '@angular/forms';
    import { TypeaheadMatch } from 'ngx-bootstrap/typeahead/typeahead- 
    match.class';

    @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    selectedOption;
    groupSelected = {name: 'Alabama', value: 1};
    statesComplex: any[] = [
      { id: 1, name: 'Alabama', value: 1, region: 'South' },
      { id: 2, name: 'Alaska', value: 2, region: 'West' },
      { id: 3, name: 'Arizona', value: 3, region: 'West' },
      { id: 4, name: 'Arkansas', value: 4, region: 'South' },
      { id: 5, name: 'California', value: 5, region: 'West' },
    ];

    onSelect(event: TypeaheadMatch): void {
      this.selectedOption = event.item;
      this.groupSelected.name = event.item.name;
      this.groupSelected.value = event.item.value;
      }
    }

html中的变化：

    <pre class="card card-block card-header mb-3">Model: 
        {{groupSelected.value | json}}</pre>
    <input [(ngModel)]="groupSelected.name"
       [typeahead]="statesComplex"
       typeaheadOptionField="name"
       typeaheadGroupField="region"
       (typeaheadOnSelect)="onSelect($event)"
       class="form-control">

Answer 2

尝试使用On-select typeahead 选项：

    <pre class="card card-block card-header mb-3">Model: {{selectedValue | json}}</pre>
    <pre class="card card-block card-header mb-3">Selected option: {{selectedOption | json}}</pre>
     
    <input [(ngModel)]="selectedValue"
           [typeahead]="states"
           typeaheadOptionField="name"
           (typeaheadOnSelect)="onSelect($event)"
           class="form-control">

在您的组件中添加：

      onSelect(event: TypeaheadMatch): void {
        this.selectedOption = event.item;
      }

Stackblitz 示例

Answer 3

希望这可以帮助，

组件.ts

export class AppComponent  {
 public groupSelected: string = "Alabama";
 public item: state = { id: 1, name: 'Alabama', value:"1", region: 'South' };
  public statesComplex: state[] = [
    { id: 1, name: 'Alabama', value:"1", region: 'South' },
    { id: 2, name: 'Alaska', value:"2", region: 'West' },
    { id: 3, name: 'Arizona', value:"3", region: 'West' },
    { id: 4, name: 'Arkansas', value:"4", region: 'South' },
    { id: 5, name: 'California', value:"5", region: 'West' },
  ];
  public value:any = this.statesComplex[0];

  onSelect(){
    var i = 0;
    while (i < this.statesComplex.length){
      if(this.statesComplex[i].name === this.groupSelected){
        this.item = this.statesComplex[i];
        break;
      }
      i = i+1;
    }
  }
}
export interface state {
  id: Number;
  name: String;
  value: String;
  region: String;
}

组件.html

<pre class="card card-block card-header mb-3">Model: {{item.id}} {{groupSelected | json}}</pre>
<input [(ngModel)]="groupSelected"
       [typeahead]="statesComplex"
       typeaheadOptionField="name"
       typeaheadGroupField="region"
       class="form-control"
       (typeaheadOnSelect)="onSelect()">

Stackblitz 示例