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

Question

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

当我将 [value]="baseCoin.ID" 更改为 [value]="baseCoin.Abbr" 时，当我 select 一个项目时会显示正确的字符串，但是，我需要 (ngModelChange ) 事件 return 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

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

检查这个例子

<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);
    }
}

您还需要创建搜索管道

Answer 2

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

(onSelectionChange)="setBaseCoinID( baseCoin.ID )" 已添加到垫选项。

<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() 调用。

到目前为止这有效。

然而，更高的级别，其中基础硬币是 selected 基于 selected Exchange，我想以类似的方式使用 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-option 触发，所以方法 setExchangeID 总是设置数组交换中的最后一个。

知道应该更改什么吗？

Answer 3

查看文档中的“Setting separate control and display values”。自动完成有一个 @Input() displayWith 是 "Function that maps an option's control value to its display value in the trigger".

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>

属性，这是一个 "Event that is emitted whenever an option from the list is selected"。 Select 也有类似的输出。 onSelectionChanged 然而，是一个 "Event emitted when the option is selected or deselected."

Answer 4

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

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

Angular4 matAutocomplete not showing Value but ID on selecting an item

angular

angular-material2

angular4-forms

mat-autocomplete