Angular matAutocomplete 不显示值，但在选择项目时显示

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

查看文档中的“Setting separate control and display values”。自动完成有一个 @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>

我还想补充一下 Autocomplete有一个

@Output() optionSelected: EventEmitter<MatAutocompleteSelectedEvent>

属性，这是“每当从列表中选择选项时发出的事件”。 Select也有类似的输出。但是，onSelectionChanged 是“选择或取消选择选项时发出的事件。”