Angular: автозаполнение материала, заполненное данными API, возвращает JSON значение

Question

Я новичок в angular и работаю над приложением небольшой книги. В нем пользователь должен выбрать клиента из поля автозаполнения материала, которое заполняется данными из API. Вот так:

PHP Back-end

    <?php

require 'database.php';

$nhiu_customers = [];
$sql = "SELECT cust_name FROM customer_table";

if($result = mysqli_query($con,$sql))
{
  $i = 0;
  while($row = mysqli_fetch_assoc($result))
  {
    $customers[$i]['cust_name'] = $row['cust_name'];
    $i++;
  }

  echo json_encode($customers);
}
else
{
  http_response_code(404);
}

Angular Component. html

{{incomeForm.value | json}}
<form [formGroup]="Form">

<p> <mat-form-field class="customer">
    <input type="text" matInput placeholder="Select Customer" 
    [matAutocomplete]="auto" formControlName="customerName">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="getOptionText">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option.cust_name}}
    </mat-option>
    </mat-autocomplete>
</mat-form-field> 

</p>

Angular Component.TS

import { Component, OnInit, Injectable } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import {Observable, of, Subscription} from 'rxjs';
import {map, startWith, switchMap, tap, debounceTime} from 'rxjs/operators';
import { ApiService } from '../api.service';

export class Component implements OnInit{

Form = new FormGroup({
  customerName: new FormControl('')
});

filteredOptions: Observable<string>;

ngOnInit() {
  this.filteredOptions = this.Form.controls['customerName'].valueChanges.pipe(
    startWith(""),
    debounceTime(300),
    switchMap(value => this.doFilter(value))
  );

  doFilter(value){
    return this.service.getData().pipe(
      map(response =>
        response.filter(option => {
          return option.cust_name.indexOf(value) === 0;
        })
      )
    );

  }

  getOptionText(option) {
    return  option.cust_name;
  }

}

Angular Служба API

export class ApiService {

  constructor(private httpClient: HttpClient) { }

opts = [];

getData() {
  return this.opts.length
    ? of(this.opts)
    : this.httpClient
    .get<any>("http://localhost/api/read.php")
    .pipe(tap(data => (this.opts = data)));

}
}

Автозаполнение материала работает нормально, заполняет данные из API. Но проблема в том, что когда я выбираю имя клиента из списка, пакет JSON формы, которую я должен опубликовать, принимает закодированное значение JSON имени клиента вместо обычного ввода текста (см. Изображение ниже). В идеале форма должна выдавать JSON значение "customerName": "Customer Name" для formControl customerName .

[

Что я делаю не так?

Answer 1

Это происходит из-за атрибута [значение] для опции.

Если вы установите значение как option.name, тогда элемент управления формы будет иметь только имя, а не объект, и вам не понадобится displayWith функция.

  <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name">
    {{option.name}}
  </mat-option>

Существует причина, почему вы должны установить опцию, как это для элемента управления формы. Обычно вы хотите отправить идентификатор опции (в вашем случае, идентификатор клиента) на сервер, чтобы идентифицировать выбранную запись.

Пример, показывающий автозаполнение