Angular 5 with material autocomplete

问题

I have a problem in the autocomplete material, in the part of the [value] = "option.NameTypeProduct", what I want to pass is the id, try with option.id, it works but in the input I get the id, and I want you to name me, as I do to pass the id, and that the name keeps coming up.

There is some way of doing what I say of passing the id parameter of the html without the name disappearing from the input.

export class DetailproductcreateComponent implements OnInit {

  FormDetailProductCreate : FormGroup;
  myControl = new FormControl();


  filteredProducts : Observable<Product[]>;
  filteredProviders : Observable<Provider[]>;
  filteredTypeProducts : Observable<Typeproduct[]>;
  
  products : Product[];
  providers : Provider[];
  typeproducts : Typeproduct[];

  constructor(private servicedetailproduct : DetailproductService, private FB : FormBuilder,
  private serviceproduct : ProductService, private serviceprovider : ProviderService,
  private servicetypeproduct : TypeprodutService, private servicelote : LoteService) { 
    this.FormDetailProductCreate = this.FB.group({
      Id_Product:[ '',Validators.required],
      Id_TypeProduct:[ '',Validators.required],
      Id_Lote:['', Validators.required],
      Id_Provider:[ '',Validators.required],
      TotalPrice:[ '',Validators.required],
      Quantity:[ '',Validators.required],
      Image:[ '',Validators.required],
    })  

  }

  ngOnInit() {
    this.getProducts();
    this.getProviders();
    this.getTypeProducts();
  }

  getProducts(){
    this.serviceproduct.getProduct().subscribe((data : Product[])=>{
      this.products = data;
      this.filteredProducts = this.FormDetailProductCreate.controls.Id_Product.valueChanges.pipe(
      startWith(''),
      map(val => val ? this.filterProduct(val) : this.products.slice())
      //map(val => this.filterProduct(val))
      );
    });
  }

  getProviders(){
    this.serviceprovider.getProviders().subscribe((data)=>{
      this.providers = data;
      this.filteredProviders = this.FormDetailProductCreate.controls.Id_Provider.valueChanges.pipe(
      startWith(''),
      map(val => val ? this.filterProviders(val) : this.providers.slice())
      );
    });
  }

  getTypeProducts(){
    this.servicetypeproduct.getTypeProduct().subscribe((data)=>{
      this.typeproducts = data;
      this.filteredTypeProducts = this.FormDetailProductCreate.controls.Id_TypeProduct.valueChanges.pipe(
      startWith(''),
      map(val => val ? this.filterTypeProducts(val) : this.typeproducts.slice())
      );
      console.log(this.filteredTypeProducts);
    });
  }

  
  filterProduct(val : string): Product[] {
    return this.products.filter(option => option.NameProduct.toLowerCase().indexOf(val.toLowerCase()) === 0);
  }

  filterProviders(val : string): Provider[] {
    return this.providers.filter(option => option.NombreProveedor.toLowerCase().indexOf(val.toLowerCase()) === 0);
  }

  filterTypeProducts(val : string): Typeproduct[] {
    return this.typeproducts.filter(option => option.NameTypeProduct.toLowerCase().indexOf(val.toLowerCase()) === 0);
  }

<form [formGroup]="FormDetailProductCreate">
      
      <div class="example-container">
        <mat-form-field>
          <input matInput placeholder="Producto" formControlName="Id_Product" class="form-control" id="Id_Product" [matAutocomplete]="product" required>
          <mat-autocomplete #product="matAutocomplete" >
            <mat-option *ngFor="let option of filteredProducts | async" [value]="option.NameProduct">
              {{ option.NameProduct }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <div class="color-required" *ngIf="FormDetailProductCreate.get('Id_Product').touched && FormDetailProductCreate.get('Id_Product').invalid">
          Producto es requerido
        </div>
      </div>

      <div class="example-container">
        <mat-form-field>
          <input matInput formControlName="Id_TypeProduct" placeholder="Tipo de producto" class="form-control" id="Id_TypeProduct" [matAutocomplete]="typeproduct" required>
          <mat-autocomplete #typeproduct="matAutocomplete" >
            <mat-option  *ngFor="let option of filteredTypeProducts | async" [value]="option.NameTypeProduct">
              {{ option.NameTypeProduct }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <div class="color-required" *ngIf="FormDetailProductCreate.get('Id_TypeProduct').touched && FormDetailProductCreate.get('Id_TypeProduct').invalid">
          Tipo de producto es requerido
        </div>
      </div>

      <div class="example-container">
        <mat-form-field>
          <input type="number"  matInput formControlName="Id_Lote" placeholder="Fecha vencimiento" class="form-control" id="Id_Lote" required>
        </mat-form-field>
        <div class="color-required" *ngIf="FormDetailProductCreate.get('Id_Lote').touched && FormDetailProductCreate.get('Id_Lote').invalid">
          Fecha vencimiento es requerido
        </div>
      </div>

      <div class="example-container">
        <mat-form-field>
          <input matInput formControlName="Id_Provider" placeholder="Proveedor" class="form-control" id="Id_Provider" [matAutocomplete]="provider" required>
          <mat-autocomplete #provider="matAutocomplete">
            <mat-option  *ngFor="let option of filteredProviders | async" [value]="option">
              {{ option.NombreProveedor }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <div class="color-required" *ngIf="FormDetailProductCreate.get('Id_Provider').touched && FormDetailProductCreate.get('Id_Provider').invalid">
          Proveedor es requerido
        </div>
      </div>

      <div class="example-container">
        <mat-form-field>
          <input type="number"matInput formControlName="TotalPrice" placeholder="Precio total" class="form-control" id="TotalPrice" required>
        </mat-form-field>
        <div class="color-required" *ngIf="FormDetailProductCreate.get('TotalPrice').touched && FormDetailProductCreate.get('TotalPrice').invalid">
          Precio total es requerido
        </div>
      </div>

      <div class="example-container">
        <mat-form-field>
          <input type="number" matInput formControlName="Quantity" placeholder="Cantidad" class="form-control" id="Quantity" required>
        </mat-form-field>
        <div class="color-required" *ngIf="FormDetailProductCreate.get('Quantity').touched && FormDetailProductCreate.get('Quantity').invalid">
          Cantidad es requerido
        </div>
      </div>

      <div class="example-container">
        <mat-form-field>
          <input matInput formControlName="Image" placeholder="Imagen" class="form-control" id="Image" required>
        </mat-form-field>
      </div>
     
    </form>

回答1:

MatAutocomplete provides the displayWith feature for specifying a function to process the selected option value and return a display value. Instead of making the name the option value, make the object (e.g. Product) the value. For example:

html:

<mat-autocomplete #product="matAutocomplete" [displayWith]="displayProduct">
    <mat-option *ngFor="let product of filteredProducts | async" [value]="product">
        {{ product.NameProduct }}
    </mat-option>
</mat-autocomplete>

script:

displayProduct(product: Product) {
    return product.NameProduct;
}

来源：https://stackoverflow.com/questions/49930345/angular-5-with-material-autocomplete