角材料自动完成功能无法正常工作

我正在使用Angular Materials自动完成功能来自动完成数据库中超过250万个现有单词的用户搜索关键字，我还限制了搜索功能，仅在第4个字符之前显示自动完成的结果，尽管我的页面在第一个字符后被阻止用户输入的字符对我来说似乎不合逻辑（如果这是大数据问题，应该在用户键入第四个字符后出现），这是我的Typescript代码：

  control = new FormControl();
  filteredWords: Observable<string[]>;
  url = "./assets/existingwords.txt";
  public  words : string[] =[];

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase().replace(/\s/g, '');
    return this.words.filter(word => word.toLowerCase().replace(/\s/g, '').includes(filterValue));
  }
  ngOnInit() : void  {
    this.filteredWords = this.control.valueChanges.pipe(
        startWith(''),
        map(value => value.length>=4 ? this._filter(value): this.words.slice())
    );
  }

这是我的HTML代码：

                    <div class="form-group">
                    <input matInput type="text" class="form-control" id="idWord" [formControl]="control" [(ngModel)]="myword" placeholder="Saisir votre terme ici.." name="myword" [matAutocomplete]="auto">
                    <mat-autocomplete #auto="matAutocomplete">
                        <mat-option *ngFor="let word of filteredWords | async" [value]="word">
                          {{word}}
                        </mat-option>
                    </mat-autocomplete>
                    </div>