2

我正在尝试使用两个 matInput 字段，每个字段都与单独的 mat-autocomplete 面板绑定。按照此处的步骤，我可以让一个正常工作，但是我在使用两个输入字段和自动完成面板时遇到了困难。

这是我的html：

<form>

  <mat-form-field>
    <input matInput [matAutocomplete]="first" [formControl]="myControl">
     <mat-autocomplete #first="matAutocomplete">
       <mat-option *ngFor="let option of filteredOptions1 | async" [value]="option">
          {{option}}
        </mat-option>
     </mat-autocomplete>
   </mat-form-field>


   <mat-form-field>
     <input matInput [matAutocomplete]="second" [formControl]="otherControl">
     <mat-autocomplete #second="matAutocomplete">
       <mat-option *ngFor="let option of filteredOptions2 | async" [value]="option">
          {{option}}
       </mat-option>
      </mat-autocomplete>
   </mat-form-field>

</form>

这是我的组件：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';


@Component({
  selector: 'app-property-create',
  templateUrl: './property-create.component.html',
  styleUrls: ['./property-create.component.css']
})

export class PropertyCreateComponent implements OnInit {

  myControl = new FormControl();
  otherControl = new FormControl();

  options1: string[] = ['One', 'Two', 'Three'];
  options2: string[] = ['Four', 'Five', 'Six'];

  filteredOptions1: Observable<string[]>;
  filteredOptions2: Observable<string[]>;

  constructor() { }

  ngOnInit() {

    this.filteredOptions1 = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );

    this.filteredOptions2 = this.otherControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter2(value))
      );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.options1.filter(option => option.toLowerCase().includes(filterValue));
  }

  private _filter2(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.options2.filter(option => option.toLowerCase().includes(filterValue));
  }

}

将每个文本输入字段链接到相应的面板时，我使用 [matAutocomplete]="first" 将第一个面板链接到第一个文本输入。根据 Angular Material 文档，我希望能够使用 [matAutocomplete]="second" 将第二个文本输入字段链接到第二个自动完成面板。

现在我的自动完成面板显示在同一个位置，而不是在相应的文本字段下。

有没有人看到这个或知道我做错了什么？

4

1 回答 1

0

原来您缺少表单和 mat-form-field 元素的 css 类：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input  placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="first">
    <mat-autocomplete #first="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions1|async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  <mat-form-field class="example-full-width">
    <input placeholder="Pick one" aria-label="Number" matInput [formControl]="otherControl" [matAutocomplete]="second">
    <mat-autocomplete #second="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions2| async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

Stackblitz 在这里：https ://stackblitz.com/edit/angular-gqax9d

于 2018-11-11T03:57:37.953 回答