Я использую автозавершение в Angular 2. Я могу фильтровать результат, когда набираю буквы в поле ввода. Но когда я выбираю элемент, вместо того, чтобы получить имя, он меняется на идентификатор. Пожалуйста, смотрите изображение ниже:
Но когда я щелкаю или выбираю элемент, вот что идет в поле ввода:
Имя пропало и заменяется идентификатором, который вводит в заблуждение конечного пользователя. Ниже описано, как я это реализовал.
.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» - это имя. Подскажите пожалуйста как это исправить? Спасибо.