Question

你能帮帮我吗？我对自动填充材料有一些问题。

我不知道是什么问题，我遵循本教程：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);   }
        }

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>

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

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

如果有一些想法，我想帮助我。谢谢

Answer 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

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

1 个答案: