带有材料自动完成功能的 Angular 5 [英] Angular 5 with material autocomplete

查看：21
本文介绍了带有材料自动完成功能的 Angular 5的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

导出类DetailproductcreateComponent实现OnInit {FormDetailProductCreate : FormGroup;myControl = new FormControl();FilteredProducts : Observable;FilteredProviders : Observable;FilteredTypeProducts : Observable;产品:产品[]；提供者:提供者[]；类型产品:类型产品[]；构造函数(私有 servicedetailproduct : DetailproductService, 私有 FB : FormBuilder,私人服务产品:ProductService，私人服务提供者: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],总价:[ '',Validators.required],数量:[ '',Validators.required],图像:[ '',Validators.required],})}ngOnInit() {this.getProducts();this.getProviders();this.getTypeProducts();}获取产品(){this.serviceproduct.getProduct().subscribe((data : Product[])=>{this.products = 数据；this.filteredProducts = this.FormDetailProductCreate.controls.Id_Product.valueChanges.pipe(从...开始('')，map(val => val ? this.filterProduct(val) : this.products.slice())//map(val => this.filterProduct(val)));});}获取提供者(){this.serviceprovider.getProviders().subscribe((data)=>{this.providers = 数据；this.filteredProviders = this.FormDetailProductCreate.controls.Id_Provider.valueChanges.pipe(从...开始('')，map(val => val ? this.filterProviders(val) : this.providers.slice()));});}getTypeProducts(){this.servicetypeproduct.getTypeProduct().subscribe((data)=>{this.typeproducts = 数据；this.filteredTypeProducts = this.FormDetailProductCreate.controls.Id_TypeProduct.valueChanges.pipe(从...开始('')，map(val => val ? this.filterTypeProducts(val) : this.typeproducts.slice()));console.log(this.filteredTypeProducts);});}filterProduct(val : string): 产品[] {返回 this.products.filter(option => option.NameProduct.toLowerCase().indexOf(val.toLowerCase()) === 0);}filterProviders(val : string): Provider[] {返回 this.providers.filter(option => option.NombreProveedor.toLowerCase().indexOf(val.toLowerCase()) === 0);}filterTypeProducts(val : string): Typeproduct[] {返回 this.typeproducts.filter(option => option.NameTypeProduct.toLowerCase().indexOf(val.toLowerCase()) === 0);}

<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">需要的产品

<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">产品的要求

<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 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">证明者要求

<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 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">唱诗班

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

解决方案

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

html:

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

脚本:

displayProduct(产品:产品){return product.NameProduct;}

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>

解决方案

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;
}

这篇关于带有材料自动完成功能的 Angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆