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

【问题标题】：Angular4 matAutocomplete not showing Value but ID on selecting an itemAngular matAutocomplete 不显示值，但在选择项目时显示
【发布时间】：2018-07-23 20:14:28
【问题描述】：

当我在下面的 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>

我错过了什么吗？

感谢您的帮助。谢谢。

【问题讨论】：

标签： angular angular-material2 angular4-forms mat-autocomplete

【解决方案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 是“选择或取消选择选项时发出的事件。”

【讨论】：

【解决方案2】：

您需要为此使用两个表单控件。

检查这个例子

<md-input-container class="full-width">
                                                <input mdInput placeholder="Location *" [mdAutocomplete]="autoLocation"
                                                       #searchLocation
                                                       formControlName="location_name"
                                                       id="selLocation"
                                                       (keyup)="onChangeLocationName()">
                                            </md-input-container>
                                            <md-autocomplete #autoLocation="mdAutocomplete">
                                                <md-option
                                                        *ngFor="let location of locations | search: searchLocation.value"
                                                        [value]="location.name"
                                                        (onSelectionChange)="onSelectedLocation($event.source.selected, location.id)">
                                                    {{ location.name }}
                                                </md-option>
                                            </md-autocomplete>

组件

onSelectedLocation(isSelected: boolean, locationId: number): void {
    if (isSelected) {
        setTimeout(() => {
            this.userForm.patchValue({location_id: locationId});
            this.userForm.get('location_name').setErrors(null);
            this.selectedLocationName = this.userForm.value.location_name;
        }, 200);
    }
}

您还需要创建搜索管道

【讨论】：

【解决方案3】：

(ngModelChange) 现在触发 populateMarketCoins() 而不返回 $event。

(onSelectionChange)="setBaseCoinID( baseCoin.ID )" 已添加到 mat-option。

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

Metghod setBaseCoinID() 设置一个实例变量，该变量由方法 populateMarketCoins() 调用。

到目前为止，这是可行的。

但是，在更高级别，基础硬币是根据选定的交易所选择的，我想以类似的方式使用 mat-select，如下所示：

<mat-form-field>
    <mat-select placeholder="Exchange" name="Exchange" [(ngModel)]="newTrade.Exchange.Title" (ngModelChange)="populateBaseCoins()">
        <mat-option *ngFor="let exchange of exchanges" [value]="exchange.Title" (onSelectionChange)="setExchangeID( exchange.ID )">
            {{exchange.Title}}
        </mat-option>
    </mat-select>
</mat-form-field>

我发现 (onSelectionChange) 每次都会为每个 mat 选项触发（也在初始化时），所以方法 setExchangeID 总是设置数组交换中的最后一个。

知道应该改变什么吗？

【讨论】：

【解决方案4】：

您需要使用displayWith 属性。您可以在官方文档站点中获取更多信息和示例说明其用法：https://material.angular.io/components/autocomplete/overview#setting-separate-control-and-display-values

【讨论】：