我没有得到我的对象列表的正确值

Question

我正在尝试将 TYPEHEAD 用于库 ng-bootstrap 的输入，以显示对象列表（就像没有框的 select）：

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 (id_product)。如何修复此错误？

这是我的 stackblitz 这个错误。

Answer 1

在 <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>

Demo

Answer 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;
}

我没有得到我的对象列表的正确值

I'm not getting a correct value of my object list

typescript

ng-bootstrap

angular