angular - Angular 2中的自动完成在选择后在输入框中显示id而不是名称

Question

我正在 Angular 2 中实现自动完成。当我在输入框中键入字母时，我可以过滤结果。但是当我选择一个项目时，它并没有得到名称，而是改为了 id。请看下图：

但是当我单击或选择一个项目时，输入框中的内容如下：

该名称已消失，取而代之的是一个 id，这会使最终用户感到困惑。下面是我如何实现它。

.ts

glMasterList: ParamGLMaster[] = [];
filteredGlMasterList: Observable<any[]>;
getGlMaster() {
    this.as.getGlMaster().subscribe((data: any) => {
      this.glMasterList = data;
      this.filteredGlMasterList = this.GLCode.valueChanges.pipe(
        startWith(""),
        map(gl => (gl ? this.filterGlMasterList(gl) : this.glMasterList.slice()))
      )
    });
  }
  filterGlMasterList(name: string) {
    return this.glMasterList.filter(
      ml => ml.GLDesc.toLowerCase().indexOf(name.toLowerCase()) === 0
    );
  }

.html

<mat-form-field>
    <input
      type="text"
      matInput
      [matAutocomplete]="auto1"
      formControlName="GLCode"
      placeholder="GL Code"
    />
    <!-- <mat-select placeholder="GL Code" formControlName="GLCode">
        <mat-option *ngFor="let item of glMasterList" [value]="item.GLCode" (onSelectionChange)="onChange($event, item.GLDesc)">{{item.GLDesc}}</mat-option>
      </mat-select> -->
    <mat-autocomplete #auto1="matAutocomplete">
      <mat-option
        *ngFor="let gl of (filteredGlMasterList | async)"
        [value]="gl.GLCode"
      >
        <span>{{ gl.GLDesc }}</span> |
      </mat-option>
    </mat-autocomplete>
    <mat-error *ngIf="GLCode.invalid" style="color: red;">{{
      GlCodeError()
    }}</mat-error>
</mat-form-field>

'GLCode' 是 ID，'GLDesc' 是名称。你能请教如何纠正这个问题吗？谢谢你。

标签： angularautocomplete

Answer 1

用以下代码替换您的代码

<mat-option
    *ngFor="let gl of (filteredGlMasterList | async)"
    [value]="gl.GLDesc"
  >
   {{ gl.GLDesc }}
  </mat-option>

看到这个 - https://material.angular.io/components/autocomplete/examples