Я не получаю правильное значение моего списка объектов - PullRequest
Новая
       7

Я не получаю правильное значение моего списка объектов

0 голосов
/ 26 сентября 2018

Я пытаюсь использовать 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).Как можно исправить эту ошибку?

1027 * Вот мой stackblitz этой ошибки.

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

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

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

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

<code> <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 }}
Id: {{id}}

TS 

 getId(id: number) {
    this.id = id;
}
0 голосов
/ 26 сентября 2018

измените эту строку следующим образом в пределах <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>

Демо

...