NGX начальной загрузки типа впереди текст разделения?

Question

Я использую загрузчик ngx для реализации раскрывающегося списка типов.

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 я не смог разделить эти два.

Я даже пытался с ngx-шаблоном, но в конце пользовательского интерфейса вместо текста будет отображаться значение

мой пример в стекблитах

Answer 1

Попробуйте использовать опцию On-select typeahead:

<code><pre class="card card-block card-header mb-3">Model: {{selectedValue | json}}

Selected option: {{selectedOption | json}}

в вашем компоненте добавить:

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

Пример Stackblitz

Answer 2

Надеюсь, это поможет,

component.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;
}

component.html

Model: {{item.id}} {{groupSelected | json}}

Пример Stackblitz

Answer 3

используйте 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:

<code><pre class="card card-block card-header mb-3">Model: 
{{groupSelected.value | json}}