Я пытаюсь использовать TYPEHEAD для ввода с помощью библиотеки ng-bootstrap, чтобы показать список объектов (как при выборе без поля):

< Сильный > HTML

<input type="search"
       #instance="ngbTypeahead"
       placeholder="Search"
       aria-label="Search"
       [(ngModel)]="model"
       [ngbTypeahead]="search"
       [resultTemplate]="rt"
       [inputFormatter]="formatter"
       (focus)="focus$.next($event.target.value)"
       (click)="click$.next($event.target.value)"
>

Когда я пишу имя своего объекта, я получаю только empty value семь раз (все объекты, которые я жду), если я выбираю объект, значение на входе отображается правильно (но в поле оно пустой ) .

< Сильный > TS

  search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      merge(this.focus$),
      merge(this.click$.pipe(filter(() => !this.instance.isPopupOpen()))),
      map(term => (term === '' ? this.productList
        : this.productList.filter(v => v.name_product.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
    );

   formatter = (x: {name_product: string}) => x.name_product;

    searchUrl(url){
      if(url){
        window.open(url,'_blank');
      }
    }

< Сильный > JSON

  productList =
  [ 
    {
        id_product:1,
        name_product: 'Laptop Dell'
    },
    {
        id_product:2,
        name_product: 'Laptop HP'
    },
    {
        id_product:3,
        name_product: 'G-Shock Casio'
    },
    {
        id_product:4,
        name_product: 'Casio LR-T CALC'
    },
    {
        id_product:5,
        name_product: 'LG G3 Stylus'
    },
    {
        id_product:6,
        name_product: 'DYMO 450 Turbo'
    },
    {
        id_product:7,
        name_product: 'Brother QL 700'
    }
  ];

Но мне нужно показать название моего продукта (name_product), но в моем [(ngModel)]="model" я надеюсь получить идентификатор (id_product). Как исправить эту ошибку ?.

Вот мой stackblitz этого ошибка .

0
jecorrales 26 Сен 2018 в 06:44

2 ответа

Лучший ответ

Ваша проблема была в HTML

Кроме того, я покажу вам, как получить id

https://stackblitz.com/edit/angular-mrftun

 <label for="typeahead-basic">Search :</label>

<ng-template #rt let-r="result" let-t="term">
  <div (click)='getId(r.id_product)'>{{r.name_product}}</div>
</ng-template>

  <input id="typeahead-template" type="text"  [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt"
  [inputFormatter]="formatter" />

  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" (click)="searchUrl(model.url)">Search</button>

  <pre>Model: {{ model | json }}</pre>

  Id: {{id}}

< Сильный > TS

 getId(id: number) {
    this.id = id;
}
1
devpato 27 Сен 2018 в 00:06

Измените эту строку следующим образом в <ng-template>

<ng-template #rt let-r="result" let-t="term">
  <ngb-highlight [result]="r.name_product" [term]="t"></ngb-highlight> 
   //or just to see the item you can use {{r.name_product}}
</ng-template>

демонстрация

1
diEcho 26 Сен 2018 в 04:11