Angular4 matAutocomplete在选择项目时不显示值但显示ID

Question

当我在下面的 matAutocomplete formControl 中选择一个项目时，我总是得到 ID，而不是下拉列表中显示的值。

当我将 [value]="baseCoin.ID" 更改为 [value]="baseCoin.Abbr" 时，当我选择一个项目时会显示正确的字符串，但是，我需要 (ngModelChange) 事件将 baseCoin.ID 返回到一个方法，而不是 baseCoin.Abbr。

<mat-form-field>
    <input matInput placeholder="Base Coin" aria-label="Base Coin" [matAutocomplete]="basecoin" [formControl]="baseCoinCtrl" [(ngModel)]="newTrade.BaseCoin.Abbr" (ngModelChange)="populateMarketCoins( $event )">
    <mat-autocomplete #basecoin="matAutocomplete">
        <mat-option *ngFor="let baseCoin of filteredBaseCoins | async" [value]="baseCoin.Abbr">
            {{baseCoin.Abbr | uppercase}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

我错过了什么吗？

帮助表示赞赏。谢谢。

Answer 1

从文档中查看“设置单独的控制和显示值”。自动完成有@Input() displayWith一个“将选项的控制值映射到触发器中的显示值的函数”。

displayFn(baseCoin) {
  return baseCoin ? baseCoin.Abbr : undefined;
}

<mat-autocomplete #basecoin="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngFor="let baseCoin of filteredBaseCoins | async" [value]="baseCoin">
      {{baseCoin.Abbr | uppercase}}
  </mat-option>
</mat-autocomplete>

我还想补充一点，自动完成有一个

@Output() optionSelected: EventEmitter<MatAutocompleteSelectedEvent>

属性，即“在选择列表中选择的选项时发出的”事件“。该选择也有类似的输出。onSelectionChanged但是，是“选择或取消选择选项时发出的事件”。