angular - 使用 Observable 的角度自动完成

Question

我遇到了 Angular 自动完成的问题，我无法显示名称而不是 id，正如您在此处看到的那样：

我的数据是 Observable 的，如下所示：

autocomplete.component.ts：

driverListItem$: Observable<DriverListItem[]>;
ngOnInit() {
    this.driverListItem$ = this.driverListItemService.getList(+subcontractorId);
}

自动完成.service.ts：

getList(subcontractorId?: number): Observable<DriverListItem[]> {
    return this.http.get<DriverListItem[]>(
      this.apiUrl,
      {
        params: new HttpParams().append('subcontractorId', subcontractorId.toString()),
        headers: this.getAuthHeaders(this.authService.token),
      }
    )
    .do(
      value => console.debug('DriverListItemService getList value', value),
      error => {
          console.debug('DriverListItemService getList error', error);
          this.handleError(error);
      },
    );
  }

autocomplete.component.html：

<mat-form-field style="width:100px">
  <input matInput name="assignedOperator" [(ngModel)]="entity.assignedOperator" [matAutocomplete]="auto" />
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let driver of driverListItem$ | async" [value]="driver.id">{{ driver.firstName + ' ' + driver.lastName }}</mat-option>
  </mat-autocomplete>
</mat-form-field>

Answer 1

看看文档：https ://material.angular.io/components/autocomplete/overview#setting-separate-control-and-display-values

如果您希望选项的控制值（保存在表单中的内容）与选项的显示值（显示在文本字段中的内容）不同，则需要在自动完成元素上设置 displayWith 属性。一个常见的用例可能是如果您想将数据保存为对象，但只显示选项的字符串属性之一。要完成这项工作，请在组件类上创建一个函数，将控件值映射到所需的显示值。然后将其绑定到自动完成的 displayWith 属性。

autocomplete.component.html

<mat-form-field style="width:100px">
    <input matInput name="assignedOperator" 
           [(ngModel)]="entity.assignedOperator" [matAutocomplete]="auto" />
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
        <mat-option *ngFor="let driver of driverListItem$ | async" 
                    [value]="driver">{{ driver.firstName + ' ' + 
                   driver.lastName }}</mat-option>
    </mat-autocomplete>
</mat-form-field>

自动完成组件.ts

displayFn(driver?: DriverListItem): string | undefined {
  return driver ? `${driver.firstname} ${driver.lastname}` : undefined;
}

更新 16/02/2018 7:56

使用这种方法，您必须将mat-option探测器设置[value]为driver. 这意味着您[(ngModel)]="entity.assignedOperator"持有您的驱动程序对象。