Question

我正在尝试自动完成，当我只使用一个服务时，它工作正常，但是当我调用更多服务时，有些奇怪，在自动完成中它们向我出售3个服务中的单个服务选项调用

In this image I get options from the supplier in the product, I do not know why that happens.

myControl = new FormControl();
filteredProviders : Observable<Provider[]>;
filteredProducts : Observable<Product[]>;
filteredTypeProducts : Observable<Typeproduct[]>;
products : Product[]; providers : Provider[]; typeproducts : Typeproduct[];


getProducts(){
this.serviceproduct.getProduct().subscribe((data)=>{
  this.products = data;
  this.filteredProducts = this.myControl.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.myControl.valueChanges.pipe(
  startWith(''),
  map(val => val ? this.filterProviders(val) : this.providers.slice())
  );
});

}

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

}

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

}

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

}

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

}

yellow.blue.purple.green
red.blue.red.purple

}

Answer 1

Each autocomplete control must define a unique template variable. You've used auto for all three controls. They should each have their own - something like:

<input [matAutocomplete]="auto1">
<mat-autocomplete #auto1="matAutocomplete">
...

<input [matAutocomplete]="auto2">
<mat-autocomplete #auto2="matAutocomplete">
...

<input [matAutocomplete]="auto3">
<mat-autocomplete #auto3="matAutocomplete">
...

角度5材质自动完成

1 个答案: