过滤自动完成材料。一些输入表单像一个输入一样工作

Posted 2023-03-13

【中文标题】过滤自动完成材料。一些输入表单像一个输入一样工作

【英文标题】：Filter autocomplete Material. Some input form work like one input

【发布时间】：2018-07-19 06:27:28

【问题描述】：

你能帮帮我吗？我在使用自动完成材料时遇到了一些问题。

不知道是什么问题，我跟着这个教程：https://material.angular.io/components/autocomplete/overview

在component.ts中

import  Component  from '@angular/core'; 
import  FormControl  from '@angular/forms'; 
import  Observable  from 'rxjs/Observable'; 
import  startWith  from 'rxjs/operators/startWith'; 
import  map  from 'rxjs/operators/map';


@Component(   selector: 'autocomplete-filter-example', 
  templateUrl: 'autocomplete-filter-example.html', 
  styleUrls: ['autocomplete-filter-example.css'] ) 

export class AutocompleteFilterExample 

     myControl: FormControl = new FormControl();  
 myControl1: FormControl = new FormControl(); 
  myControl2: FormControl = new FormControl();

      options = [
        'One',
        'Two',
        'Three'   ];  
      options1 = [
        'test',
        'test2',
        'test1'   ];  
      options2 = [
        'test3',
        'test5',
        'test10'   ];   
filteredOptions: Observable<string[]>;  
 filteredOptions1: Observable<string[]>;  
 filteredOptions2: Observable<string[]>;

      ngOnInit() 
        this.filteredOptions = this.myControl.valueChanges
          .pipe(
          startWith(''),
          map(val => this.filter(val))
          );
        this.filteredOptions1 = this.myControl1.valueChanges
          .pipe(
          startWith(''),
          map(val => this.filter1(val))
          );
        this.filteredOptions1 = this.myControl1.valueChanges
          .pipe(
          startWith(''),
          map(val => this.filter1(val))
          );
        this.filteredOptions2 = this.myControl2.valueChanges
          .pipe(
          startWith(''),
          map(val => this.filter2(val))
          );   

      filter(val: string): string[] 
        return this.options.filter(option =>
          option.toLowerCase().indexOf(val.toLowerCase()) === 0);      
       filter1(value: string): string[] 
        return this.options1.filter(option1 =>
          option1.toLowerCase().indexOf(value.toLowerCase()) === 0);      
       filter2(value: string): string[] 
        return this.options1.filter(option1 =>
          option1.toLowerCase().indexOf(value.toLowerCase()) === 0);   
        

组件.html

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one1" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
         option 
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

    <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one2" aria-label="Number" matInput [formControl]="myControl1" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option1 of filteredOptions1 | async" [value]="option1">
         option1 
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
      <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one3" aria-label="Number" matInput [formControl]="myControl2" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option2 of filteredOptions2 | async" [value]="option2">
         option2 
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

我的问题是：为什么输入像一个一样工作并且只显示一个数组？在此链接中，您可以看到我的问题。

https://stackblitz.com/edit/angular-yw23zr-u25rqk?file=app%2Fautocomplete-filter-example.html

如果有什么想法，我想帮助我。谢谢

【参考方案1】：

您需要为不同的自动完成功能提供不同的模板参考。

您需要<mat-autocomplete #auto="matAutocomplete"> / <mat-autocomplete #auto1="matAutocomplete"> 和<mat-autocomplete #auto2="matAutocomplete">

和[matAutocomplete]="auto"[matAutocomplete]="auto1"[matAutocomplete]="auto2"

在您的示例中，您多次使用引用#auto，因此它将最后一个自动完成作为引用（这就是您看到相同列表三次的原因）。

另外，您的示例中有一些错字：

1/ 你有两次这个块

 this.filteredOptions1 = this.myControl1.valueChanges
      .pipe(
      startWith(''),
      map(val => this.filter1(val))
 );

2/您的 filter2 值基于 this.value1 而不是 this.option2 进行过滤

这里是forked stackblitz