Angular 使用filteredOptions | async时角度材质自动完成组件力选择

我一直在一步一步地关注这一点。这个例子和我的代码之间的区别是异步的

我有这个html代码

       <mat-form-field class="example-full-width" style="width:100%;" appearance="none">
          <input type="text" placeholder="Select a Training Type Name" matInput [matAutocomplete]="auto"
            formControlName="TrainingTypeId">
          <mat-icon class="edit-icon">border_color</mat-icon>
          <mat-autocomplete autoCompleteTrainingTypeName #auto="matAutocomplete" [displayWith]="displayWith">
            <mat-option *ngFor="let option of filteredOptionsTrainMeUpTrainingTypes | async"
              [value]="option.TrainingType" (click)="onSelect(option)">
              {{ option.TrainingType }}
            </mat-option>
          </mat-autocomplete>
          <mat-error *ngIf="myGroup.controls['TrainingTypeId'].hasError('required')">
            Please enter a value
          </mat-error>
          <mat-error *ngIf="myGroup.controls['TrainingTypeId'].hasError('incorrect')">
            Please select a valid project
          </mat-error>
        </mat-form-field>

边框颜色
{{option.TrainingType}
请输入一个值
请选择一个有效的项目

在ts中，我有以下代码：

  myControl = new FormControl();

  filteredOptionsTrainMeUpTrainingTypes: Observable<TrainModel[]>;

  LoadTrainingTypes() {
    this.dataService.GetLoadTrainingTypes(this.TrainingKindIdList).then(models => {
      this.TrainMeUpTrainingTypes = models;
      this.filteredOptionsTrainMeUpTrainingTypes = this.myControl.valueChanges
        .pipe(
          startWith(''),
          map(value => this.filterTrainingTypes(value))
        );
    });
  }
  private filterTrainingTypes(value: string): TrainModel[] {
    const filterValue = value.toLowerCase();
    console.log('filterValue', filterValue)
    return this.TrainMeUpTrainingTypes.filter(x => x.TrainingType.toLowerCase().indexOf(filterValue) === 0);
  }

myControl=newformcontrol（）；
filteredoptionstrainemeuptrainingtypes：可观察；
加载训练类型（）{
this.dataService.GetLoadTrainingTypes（this.trainingKindList）。然后（models=>{
this.TrainMeUpTrainingTypes=模型；
this.filteredoptionstrainemeuptrainingtypes=this.myControl.valueChanges
.烟斗(
startWith（“”），
映射（值=>this.filterTrainingTypes（值））
);
});
}
私有筛选器训练类型（值：字符串）：TrainModel[]{
常量filterValue=value.toLowerCase（）；
log（'filterValue'，filterValue）
返回此.TrainMeUpTrainingTypes.filter（x=>x.TrainingType.toLowerCase（）.indexOf（filterValue）==0）；
}

使用此代码重用的结果是，当我从“选择”或“每次显示其他内容”输入值时，请选择一个有效的项目

---

你能和我分享一些想法吗？

请提供

this.myControl

和验证器未显示在您的问题中我编辑我的问题这不是问题<代码>myGroup未定义，我们无法看到导致TrainingTypeId出现错误“不正确”的验证程序