角度材料自动完成列表未显示

Question

我正在使用自动完成的 Angular 材料组件，详细说明如下：https://material.angular.io/components/autocomplete/overview。单击输入字段或键入时，我似乎无法显示下拉列表。只是什么都没有发生。此外，现在加载页面时，我在控制台中收到错误 Cannot read property 'filter' of undefined。

这是相关的 HTML：

<input
                      type="text"
                      [formControl]="editEventForm.controls['organisers']"
                      aria-label="Organisers"
                      class="form-control user-finder-input"
                      placeholder="Type users name"
                      matInput
                      [matAutocomplete]="auto">
                    <mat-autocomplete #auto="matAutocomplete">
                        <mat-option *ngFor="let friend of filteredOptions | async" [value]="friend">
                        {{friend}}
                        </mat-option>
                    </mat-autocomplete>

以下是 .ts 文件中的 formControl：

this.editEventForm = this.formBuilder.group({
  name: ['', Validators.required],
  location: ['', Validators.required],
  Date: [''],
  id: [''],
  organisers: ['']
});

以及 .ts 文件中的其他相关代码：

   friends: ["one", "two", "three"];
    filteredOptions: Observable<string[]>;

ngOnInit(): void {
this.filteredOptions = this.editEventForm.controls['organisers'].valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
}

private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.friends.filter(option => option.toLowerCase().includes(filterValue));
  }

根据官方文档（见上面的链接），当点击输入字段或在输入字段中输入但没有任何反应时，应在输入字段下方显示一个下拉列表。