MAT-自动完成未正确绑定

Question

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

<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));
  }

}

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

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