Angular материал Автозаполнение, как связать json объект с mat-option

Question

У меня есть очень простой пример автозаполнения, в котором при каждом изменении ввода я ищу данные в API и возвращаю product_name и id. Теперь проблема в том, что мне нужно, чтобы и имя, и идентификатор были отправлены в диалог позже, но если я привяжу объект к mat-option [value], как [value]=option, то formcontrol покажет [object][object].

Но [value]=option.name отлично работает

Как связать json объект с mat-option [value], чтобы я мог использовать и имя, и идентификатор

Данные имеют форму {product_id: 4, name: "abc"}

.ts

getfiveProducts() {

    this.productService.get5Products().subscribe(data => {
      if(data){
        console.log(data)
        this.product_list = data

      }

    })
  }

  onSearchChange(value){

    debounceTime(200)

    this.productService.search_Products(value).subscribe(data =>{
      if(data){

        console.log(data)
        this.product_list = data
        console.log(value)
      }
    })

  }

. html

      <mat-form-field class="example-full-width">
        <mat-label>Enter product name</mat-label>

        <input matInput
               aria-label="product name"
               [matAutocomplete]="auto"
               formControlName ="product_name"
               (input)="onSearchChange($event.target.value)">


        <mat-autocomplete #auto="matAutocomplete">

          <mat-option *ngFor="let state of product_list " [value]="state.name">
            <span>{{state.name}}</span> 
          </mat-option>

          <mat-option *ngIf="!product_list || !product_list.length" class="text-danger">
            Such product does not exists
          </mat-option>

        </mat-autocomplete>

      </mat-form-field>

Answer 1

Когда вам нужно привязать объект к mat-options [value], вам нужно использовать свойство displayWith для элемента автозаполнения. В этом свойстве будет отображаться имя вашего поля.

Введите название продукта

        <input matInput #input
               aria-label="product name"
               [matAutocomplete]="auto"
               formControlName ="product_name">


        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" >

          <mat-option *ngFor="let state of product_list " [value]="state ">
            <span>{{state.name}}</span> 
          </mat-option>

          <mat-option *ngIf="!product_list || !product_list.length" class="text-danger">
            Such product does not exists
          </mat-option>

        </mat-autocomplete>

      </mat-form-field>

.ts

displayFn(product): string {
  return product? product.name: product;
}

ссылка