Angular4 matAutocomplete не показывает значение, но ID при выборе элемента

Question

Когда я выбираю элемент в следующем matAutocomplete formControl, я всегда получаю идентификатор, а не значение, показанное в раскрывающемся списке.

Когда я изменяю [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

Взгляните на " Установка отдельных параметров управления и отображения " из документации. Автозаполнение имеет @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>

свойство, которое является "событием, генерируемым при выборе опции из списка". Выбор также имеет аналогичный выход. 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>

составная часть

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

Вам нужно использовать displayWithатрибут. Вы можете получить дополнительную информацию и примеры, демонстрирующие его использование, на официальном сайте документации: https://material.angular.io/components/autocomplete/overview

Answer 4

(ngModelChange) теперь вызывает populateMarketCoins(), не возвращая событие $.

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

Пока это работает.

Однако на более высоком уровне, когда базовые монеты выбираются на основе выбранного 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, поэтому метод setExchangeID всегда устанавливает последнее в обменах массивами.

Любая идея, что должно быть изменено?