Угловой - материал / автозаполнение не отображаются должным образом

Question

Я пытаюсь работать с компонентом автозаполнения Angular / Material. Я добавил следующее в мой HTML-файл:

<form class="search-form">
    <mat-form-field>
        <input type="text" placeholder="Search Assemblies" matInput [formControl]="assemblySearchControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let assembly of filteredAssemblies" [value]="assembly.id">
                {{assembly.assemblyName}} ({{assembly.referenceNumber}})
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>

И в моем файле TS:

ngOnInit() {
    this.assemblySearchControl.valueChanges.subscribe(
      term => {
        if (term != '') {
          this.filteredAssemblies = this._filterAssemblies(term);
        }
      }
    )
  }

private _filterAssemblies(value: string) {
    const filterValue = value.toLowerCase();
    var temp = this.allAssemblies.filter(assembly => 
        assembly.assemblyName.toLowerCase().indexOf(filterValue) === 0 || 
        assembly.referenceNumber.toLowerCase().indexOf(filterValue) === 0);
    console.log("filteredAssemblies: ", temp);
    return temp;
}

Если я запустил сайт и ввел что-нибудь в поле поиска, я вижу в консоли Google Chrome, что filteredAssemblies имеет правильные результаты поиска. Однако возникают следующие две проблемы:

1. Текст заполнителя «Поисковые сборки» не очищается. Все, что я печатаю в поле ввода, просто отображается поверх текста заполнителя.
2. Список параметров с результатами, сохраненными в filterAssemblies, не отображается.

Я пробовал различные решения онлайн, но те же две проблемы, перечисленные выше, остаются. О проблемах не сообщается, и код компилируется нормально. Это возможно только проблема формата / расположения? Любая помощь будет принята с благодарностью.