同一页中有多个自动完成的页面，不同的来源在角度4中使用角度材料 [英] Multiple autocomplete in same page with different source in angular 4 with angular material

问题描述

同一页面中多个自动完成，其中角度4中的来源不同，并且带有角度的材料:

Multiple autocomplete in same page with different source in angular 4 with angular material:

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

我遵循了材料自动完成示例，并尝试在同一页面中再添加一个自动完成，但是来源不同，但无法正常工作.

I have followed the material autocomplete example and trying to add one more autocomplete in the same page but the source is different but not working.

formcontrol正在产生问题吗?

Is formcontrol is creating problem ??

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>

推荐答案

您为两个输入分配了相同的参考变量(#auto).每个输入的ID必须是唯一的.将第二个input和md-autocomplete更改为以下内容:

You have the same reference variable (#auto) assigned to both inputs. The id needs to be unique for each input. Change your second input and md-autocomplete to following:

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

链接到柱塞演示

对于周期 (例如*ngFor)，无需创建动态命名的模板变量，因为

For cycles like *ngFor there is no need to create dynamically named template variable, since

模板引用变量的作用域是模板 在结构指令中定义一个嵌套模板，并且 因此，引入了一个单独的范围. (此问题)

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)

这篇关于同一页中有多个自动完成的页面，不同的来源在角度4中使用角度材料的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！