Angular 5/Material 2 - 选择选项后字段中的值错误

Question

我的Angular Material 2自动填充字段存在问题.

这是我的设置:

hardwareCreate.component.ts

myControl: FormControl = new FormControl();
availableFirmware = [];
filteredFirmware: Observable<any[]>;
selectedFirmware = null;
selectedFirmwareName = '';



this.availableFirmware = [];

    this.terminalService.getFirmware().subscribe(firmware => {
      this.availableFirmware = firmware.firmware;
    });
    this.filteredFirmware = this.myControl.valueChanges
    .pipe(
      startWith(''),
      map(val => this.filterFirmware(val))
    );

filterFirmware(val: any): any[] {
    return this.availableFirmware.filter(firmware => {
      return firmware.name.toLowerCase().indexOf(val.toLowerCase()) > -1;
    });
  }

hardwareCreate.component.html

<div class="form-group">
        <mat-form-field class="example-full-width">
            <input type="text" placeholder="Firmware auswählen" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto1" [(ngModel)]="selectedFirmwareName">
            <mat-autocomplete #auto1="matAutocomplete">
                <mat-option *ngFor="let firmware of filteredFirmware | async" [value]="firmware._id">
                    {{ firmware.name }}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </div>

所以我现在的问题是,当我输入时,我得到的firmware.name属性是正确的,如下所示:

但是,当我现在选择固件,该value更改_id的 firmware.

所以我可以[value]="firmware._id"改为[value]="firmware.name"但我需要我的mongodb的ID - >

firmware: {
        type: mongoose.Schema.Types.ObjectId, 
        ref: 'Firmware'
    },

问题: 如何将显示值更改为名称,但在用户选择特定固件时仍然可以获取我的数据库的ID？

---

现在的解决方案是vsoni和JEYs答案的组合.最后的问题是,这val是一个对象.通过将其转换为字符串,任何东西都像魅力一样!感谢你们俩!

Answer 1

您可以使用displayWith功能。

你的component.html会变成

<div class="form-group">
    <mat-form-field class="example-full-width">
        <input type="text" placeholder="Firmware auswählen" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto1">
        <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFn">
            <mat-option *ngFor="let firmware of filteredFirmware | async" [value]="firmware" (onSelectionChange)="getXXX(firmware)>
                {{ firmware.name }}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</div>

然后在你的component.ts 中定义以下显示功能

displayFn(firmware: any): string {
  return firmware? firmware.name : firmware;
}

您可以在getXXX(firmware)您在component.ts 中定义的函数中访问固件 ID 。此函数将在选择更改时调用。

getXXX(firmware) {
   this.selectedFirmware = firmware;
   // here you can get id 
  // firmware._id
}

和过滤功能

filterFirmware(val: any): any[] {
    let name = val.name ? val.name : val;
    return this.availableFirmware.filter(firmware => {
      return firmware.name.toLowerCase().indexOf(name.toLowerCase()) > -1;
    });
  }