单击输入时如何使 <mat-autocomplete> 显示

Question

我使用链接到 Angular 8 输入的材料自动完成表单

我是 Angular 的新手，我还在学习。我已经尝试了一些我在 stackoverflow 上找到的解决方案但没有成功（例如：材料自动完成不显示点击列表）

这是我的 HTML 页面：

    <mat-form-field>
      <input
        matInput
        type="text"
        placeholder="Equipment"
        aria-label="Number"
        [formControl]="machineControl"
        [formControl]="machineFilter"
        [matAutocomplete]="auto"
        #machineinput
      />
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
          {{ option }}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

这是我的打字稿页面：

export class DocumentsListComponent implements OnInit {
  machineControl = new FormControl();
  options: string[] = [];
  filteredOptions: Observable<string[]>;

  @ViewChild('machineControl', { static: true }) input: ElementRef;

 constructor(public restApi: DocumentsService) {}

  ngOnInit() {


    this.restApi.getList().then(res => {
      [...]
      for (const docs of this.Document) {
        if (this.options.some(machine => machine === docs.machine)) {
        } else {
          this.options.push(docs.machine);
        }
      }
    });

    this.filteredOptions = this.machineControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );

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

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

我希望自动完成表单在输入点击时显示，但我需要输入至少 1 个字符才能显示（删除这个字符仍然显示自动完成表单）

Answer 1

已修复，感谢@AkberIqbal

我的问题是在我的 API 调用返回结果之前，我的自动完成填充了一个空列表。

为了解决这个问题，我在 restApi 调用中分配了我的 filtersOptions （一开始因为把它放在最后不起作用）：

    this.restApi.getList().then(res => {
      this.dataSource = new MatTableDataSource(res);

      this.filteredOptions = this.machineControl.valueChanges.pipe(
        startWith(''),
        map(value => this._filter(value))
      );

      [...]

      for (const docs of this.Document) {
        if (this.options.some(machine => machine === docs.machine)) {
        } else {
          this.options.push(docs.machine);
        }
      }
    });

再次感谢@AkberIqbal，我在这方面工作了太久，您很快就帮助了我。