mat-autocomplete не привязывается правильно

Я пытаюсь использовать два поля 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".

Сейчас мои панели автозаполнения отображаются в том же месте, а не в соответствующем текстовом поле.

Кто-нибудь видел это или знает, что я делаю не так?