Автозаполнение Angular Material показывает TypeError: Невозможно прочитать свойство 'createEmbeddedView' из неопределенного

Question

Я пытаюсь использовать функцию автозаполнения углового материала.Но когда я продолжаю фокусироваться, я получаю сообщение об ошибке: Не удается прочитать свойство 'createEmbeddedView' с неопределенным значением

Я также получаю еще одну ошибку для каждой вводимой буквы ОШИБКА TypeError: this.autocomplete._setVisibility не является функцией Может кто-нибудь объяснить, что не так с моим кодом?Я новичок в угловых.

На моем HTML у меня есть:

<mat-form-field> 
<input formControlName="accId" matAutocomplete="auto" matInput> 
<mat-autocomplete #auto="matAutocomplete">                                                                                                                                                                                                                                                                                                                                                                                         
<mat-option *ngFor="let accId of filteredOptions">  {{accId}}  
</mat-option>                                                                                                                                                                                                                                    
</mat-autocomplete>
</mat-form-field> 

Мой файл .ts:

 filteredOptions: Observable<string[]>;
 ngOnInit(): void {    
    this.filteredOptions = this.form.controls['accId'].valueChanges.pipe(startWith(''),map(val => this.filter(val)));
    console.log(this.filteredOptions);
    }

  filter(val: string): string[] {
  console.log("Inside filter...");
  return this.details.listOfAccIds.filter(option =>option.toLowerCase().includes(val.toLowerCase()));
  }

Примечание: я получаюthis.details как

Detail {listOfAccIds: Array(3), listOfCodes: Array(2), listOfReasons: Array(3)}
  listOfAccIds:(3) ["altaccId", "altaccIdss2", "altiid33"]
  listOfCodes:(2) ["code1", "code2"]
  listOfReasons:(3) ["reason1", "reason2", "reason3"]

Answer 1

Вам не хватает скобок вокруг директивы matAutocomplete:

<input formControlName="accId" matAutocomplete="auto" matInput>

должно быть

<input formControlName="accId" [matAutocomplete]="auto" matInput>

Скобки необходимы, потому что вы хотите передать ссылку на переменную авто .То, как вы написали, передает директиве только статическую строку, которая не работает, потому что директиве нужна ссылка на элемент, а не только его имя.