Автозаполнение в Angular 2 отображает идентификатор вместо имени в поле ввода после выбора - PullRequest
0 голосов
/ 11 января 2019

Я использую автозавершение в Angular 2. Я могу фильтровать результат, когда набираю буквы в поле ввода. Но когда я выбираю элемент, вместо того, чтобы получить имя, он меняется на идентификатор. Пожалуйста, смотрите изображение ниже:

enter image description here

Но когда я щелкаю или выбираю элемент, вот что идет в поле ввода:

enter image description here

Имя пропало и заменяется идентификатором, который вводит в заблуждение конечного пользователя. Ниже описано, как я это реализовал.

.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» - это идентификатор, а «GLDesc» - это имя. Подскажите пожалуйста как это исправить? Спасибо.

1 Ответ

0 голосов
/ 11 января 2019

замените ваш код следующим

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

Смотрите это - https://material.angular.io/components/autocomplete/examples

...