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

你能帮帮我吗。我对自动完成材料有一些问题

我不知道问题出在哪里，我遵循本教程：

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

从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormControl}；
从“rxjs/Observable”导入{Observable}；
从'rxjs/operators/startWith'导入{startWith}；
从'rxjs/operators/map'导入{map}；
@组件（{选择器：'自动完成筛选器示例'，
templateUrl:'autocomplete filter example.html'，
样式URL:['autocomplete-filter-example.css']}）
导出类自动完成过滤器示例{
myControl:FormControl=newformcontrol（）；
myControl1:FormControl=newformcontrol（）；
myControl2:FormControl=newformcontrol（）；
选项=[
"一",，
“两个”，
"三";；
选项1=[
"测试",，
"test2",，
'测试1']；
选项2=[
"test3",，
“测试5”，
'测试10']；
过滤装置：可观察；
过滤深度1：可观察；
filteredOptions2：可观察；
恩戈尼尼特（）{
this.filteredOptions=this.myControl.valueChanges
.烟斗(
startWith（“”），
映射（val=>this.filter（val））
);
this.filteredOptions1=this.myControl1.valueChanges
.烟斗(
startWith（“”），
映射（val=>this.filter1（val））
);
this.filteredOptions1=this.myControl1.valueChanges
.烟斗(
startWith（“”），
映射（val=>this.filter1（val））
);
this.filteredOptions2=this.myControl2.valueChanges
.烟斗(
startWith（“”），
map（val=>this.filter2（val））
);   }
筛选器（val:string）：字符串[]{
返回此.options.filter（选项=>
option.toLowerCase（）.indexOf（val.toLowerCase（））==0；}
过滤器1（值：字符串）：字符串[]{
返回此.options1.filter（option1=>
option1.toLowerCase（）.indexOf（value.toLowerCase（））==0；}
过滤器2（值：字符串）：字符串[]{
返回此.options1.filter（option1=>
option1.toLowerCase（）.indexOf（value.toLowerCase（））==0；}
}

Component.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>

{{option}}
{{option1}}
{{option2}}

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

---

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

对于不同的自动完成，您需要有不同的模板参考

您的需要

和

[matAutocomplete]=“auto”

[matAutocomplete]=“auto1”

[matAutocomplete]=“auto2”

在您的示例中，多次使用引用#auto，因此它将最后一个autocomplete保留为引用（这就是为什么您会三次看到相同的列表）

此外，您的示例中还有一些输入错误：

1/你有两次这个街区

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

2/您的筛选器2值基于此.value1进行筛选，而不是基于此.option2

这是你的电话号码