Question

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

当我改变[value] =＆＃34; baseCoin.ID＆＃34; to [value] =＆＃34; baseCoin.Abbr＆＃34;，当我选择一个项目时会显示正确的字符串，但是，我需要（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是“选择或取消选择选项时发出的事件。”

Answer 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>

成分</ P>

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 3

（ngModelChange）现在触发populateMarketCoins（）而不返回$ event。

（onSelectionChange）=＆＃34; setBaseCoinID（baseCoin.ID）＆＃34;被添加到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（）方法调用的实例变量。

到目前为止，这是有效的。

但是，如果基于选定的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>

我发现每次mat-option都会触发（onSelectionChange）（也在初始化时），因此setExchangeID方法总是设置数组交换中的最后一个。

知道应该改变什么？

Answer 4

您需要使用displayWith属性。您可以在官方文档网站https://material.angular.io/components/autocomplete/overview#setting-separate-control-and-display-values

中获得更多信息和显示其用法的示例。

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

4 个答案: