3

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

我错过了什么吗？

帮助表示赞赏。谢谢。

4

4 回答 4

9

查看文档中的“设置单独的控件和显示值”。自动完成有@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>

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

于 2018-02-24T01:49:01.680 回答
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);
    }
}

您还需要创建搜索管道

于 2018-02-13T12:54:47.063 回答
0

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

方法 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 总是设置数组交换中的最后一个。

知道应该改变什么吗？

于 2018-02-13T15:36:31.880 回答
0

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

于 2020-05-06T05:21:49.663 回答