mat-autocomplete未正确绑定

Question

我尝试使用两个matInput字段，每个字段都绑定了单独的mat-autocomplete面板。按照步骤here，我可以让一个很好地工作，但我在两个输入域和自动完成面板方面遇到了困难。

下面是我的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材质文档，我希望能够使用matAutocomplete=" second“将第二个文本输入字段链接到第二个自动完成面板。

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

有没有人看过或者知道我做错了什么？

Answer 1

原来您缺少form和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