angular - 具有 Angular Material 的 Angular 4 中具有不同源的同一页面中的多个自动完成

Question

在具有 Angular Material 的 Angular 4 中具有不同源的同一页面中的多个自动完成:

来源:https://material.angular.io/components/autocomplete/examples

我遵循了 Material 自动完成示例并尝试在同一页面中添加一个自动完成但来源不同但不起作用。

是 formcontrol 产生了问题吗？？

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';

@Component({
  selector: 'autocomplete-overview-example',
  templateUrl: 'autocomplete-overview-example.html',
})
export class AutocompleteOverviewExample {
  stateCtrl: FormControl;
  testCtrl: FormControl;
  filteredStates: any;
  filterTests:any;
tests = [
    'Nawab',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California'];
  states = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'Florida',
    'Georgia',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New Mexico',
    'New York',
    'North Carolina',
    'North Dakota',
    'Ohio',
    'Oklahoma',
    'Oregon',
    'Pennsylvania',
    'Rhode Island',
    'South Carolina',
    'South Dakota',
    'Tennessee',
    'Texas',
    'Utah',
    'Vermont',
    'Virginia',
    'Washington',
    'West Virginia',
    'Wisconsin',
    'Wyoming',
  ];

  constructor() {
    this.stateCtrl = new FormControl();
    this.filteredStates = this.stateCtrl.valueChanges
        .startWith(null)
        .map(name => this.filterStates(name));
        this.testCtrl = new FormControl();
    this.filteredTests = this.testCtrl.valueChanges
        .startWith(null)
        .map(name => this.filterTests(name));
  }

  filterStates(val: string) {
    return val ? this.states.filter(s => s.toLowerCase().indexOf(val.toLowerCase()) === 0)
               : this.states;
  }
  filterTests(val: string) {
    return val ? this.tests.filter(s => s.toLowerCase().indexOf(val.toLowerCase()) === 0)
               : this.tests;
  }

}


/**  Copyright 2017 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

<md-input-container>
  <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
  <md-option *ngFor="let state of filteredStates | async" [value]="state">
    {{ state }}
  </md-option>
</md-autocomplete>
<md-input-container>
  <input mdInput placeholder="Test" [mdAutocomplete]="auto" [formControl]="testCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
  <md-option *ngFor="let test of filteredTests | async" [value]="test">
    {{ test }}
  </md-option>
</md-autocomplete>

Answer 1

您将相同的引用变量 (#auto) 分配给两个输入。每个输入的 id 必须是唯一的。将您的第二个 input 和 md-autocomplete 更改为以下内容:

<md-input-container>
  <input mdInput placeholder="Test" [mdAutocomplete]="autoTest" [formControl]="testCtrl">
</md-input-container>
<md-autocomplete #autoTest="mdAutocomplete">
  <md-option *ngFor="let test of filteredTests | async" [value]="test">
    {{ test }}
  </md-option>
</md-autocomplete>

链接到 Plunker Demo

---

对于像*ngFor这样的循环，不需要创建动态命名的模板变量，因为

Template reference variables are scoped to the template they are defined in. A structural directive creates a nested template and, therefore, introduces a separate scope. (This question)