Question

我正在尝试使用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 (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;
}

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

2 个答案: