具有材料自动完成功能的 Angular 5

Question

我在自动完成材料中遇到问题，在 [value] = "option.NameTypeProduct" 的部分，我要传递的是 id，尝试使用 option.id，它可以工作，但在我得到的输入中id，我希望你给我命名，就像我传递 id 一样，并且这个名字不断出现。

有一些方法可以做我所说的传递 html 的 id 参数而不会使名称从输入中消失。

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>

Answer 1

MatAutocomplete 提供了 displayWith 功能，用于指定一个函数来处理选定的选项值并返回一个显示值。不要将名称作为选项值，而是将对象（例如产品）作为值。例如：

html:

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

脚本：

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