Question

Am使用Angular / Material Autocomplete。我在输入框中输入了几个字符（abc），然后将内容快速更新为（xyz）。在自动完成建议中，仍在获取abc的值。虽然后端API返回适当的值。我无法使用更新后的值更新DOM。我也尝试使用aync管道和observables。请建议我解决此问题的更好方法 注意：此问题仅在快速更新输入文本时发生

<mat-form-field class="text-full-width associate" *ngIf="isEditMode && selectionEditIndexData.includes(row.rowIndex)">
    <input matInput formControlName="associateName" 
        [matAutocomplete]="auto" (keydown.enter)="$event.preventDefault()" (keyup)="getAssocNameByName($event,$event.target.value,row.rowIndex)">
    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of filteredOptions | async" [value]="option.fullName" (onSelectionChange)="getAssociateNameById(row.rowIndex,option.associateId)">
            {{option.fullName}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>
`

角度代码： `

getAssocNameByName(event: KeyboardEvent, value: string, rowIndex: string) {
    this.SearchControl = this.tableForm.controls.reourcesFormArray['controls'][rowIndex].controls.associateName
    if (event.keyCode !== 40 && event.keyCode !== 38 && value.length > 0) {
      this.resourceAssignmentService.getAssociateNamesByName(value, this.id).pipe(takeUntil(this.onDestroy$)).subscribe((successRes: NamesList[]) => {
        this.options = new Array<NamesList>();        
        successRes.forEach(element => {          
          this.options.push(element)
        },
          this.filteredOptions = this.SearchControl.valueChanges
            .pipe(
              startWith(''),
              map(value => this._filter(value, this.options))
            ));
      },

      );
    }
    
private _filter(value: string, options: NamesList[]): NamesList[] {
    const filterValue = value.toLowerCase();
    return options.filter(option => (option.fullName.toLowerCase().indexOf(filterValue) === 0) || option.fullName.toUpperCase().indexOf(filterValue) === 0);
  }
`

自动完成数据绑定问题-Angular材质

0 个答案: