在具有角度材料的角度 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>

链接到 Plunker 演示

对于循环，比如*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屋！