Angular: установка значения по умолчанию в mat выберите из вызова API - PullRequest
Новая
       23

Angular: установка значения по умолчанию в mat выберите из вызова API

1 голос
/ 17 февраля 2020

Каков оптимальный способ установки значения по умолчанию для раскрывающегося списка Angular Выбор материала? Выбор коврика вызывает API, который заполняет раскрывающийся список. Затем его предварительно выбирая значение переменной defaultAddressFormat. Это делается в функции подписки.

Любопытно, если есть более оптимальный способ сделать это, this.addressService.getAddressFormatAll() является наблюдаемым

После предварительной установки значения пользователь должен иметь возможность выбрать другой выбор, если Нужно.

Если значение по умолчанию установлено до полной загрузки API, иногда оно может не отображаться, поэтому вызывается в методе подписки. 

this.addressService.getAddressFormatAll().subscribe(res => {
    this.addressFormatList = res.body;
    if (this.addressFormatList.length > 1) {
      this.addressHeaderForm.patchValue({ addressFormat: this.defaultAddressFormat });
    }
});


<mat-form-field>
     <mat-label>Address Format</mat-label>
     <mat-select
          formControlName = "addressFormat"
          [compareWith]="compareAddressFormatDataObjects"
          placeholder ="Select"
          (selectionChange)="addressFormatChangeEvent($event)" required >
          <mat-option (click)="addressHeaderForm.controls.addressFormat.reset()">Select</mat-option>
          <mat-option
               *ngFor="let addressFormatItem of addressFormatList"
               [value]="addressFormatItem"
           >
           {{addressFormatItem.addressFormatDescription}}
           </mat-option>
      </mat-select>
  </mat-form-field>

Другие ресурсы:

Установить опцию по умолчанию в матовом выборе

Angular Материал: матовый выбор не выбран по умолчанию

1 Ответ

1 голос
/ 17 февраля 2020

Это уже один из оптимальных способов сделать это. Как вы знаете, HTTP-запросы являются асинхронными, поэтому они делают что-то вроде: 

this.addressService.getAddressFormatAll().subscribe()
this.addressHeaderForm.patchValue({ addressFormat: this.defaultAddressFormat });

Не будет работать, так как метод patchValue будет вызван до того, как getAddressFormatAll будет подписан и возвращен.

Следовательно, ваш код действителен, и я не думаю, что есть необходимость что-либо менять в нем.

Конечно, вы можете использовать его как побочный эффект через конвейер Rx JS, но это не принесет дополнительных преимуществ, если вы не работаете с другими операциями, такими как дополнительные асинхронные методы для быть вызванным. 

this.addressService.getAddressFormatAll()
  pipe(
    tap((res) => {
      this.addressFormatList = res.body;
      if (this.addressFormatList.length > 1) {
        this.addressHeaderForm.patchValue({ addressFormat: this.defaultAddressFormat });
      }
    }),
  ).subscribe();

В качестве альтернативы, вы можете использовать асин c трубу. Одним из преимуществ этого является то, что вам не нужно вручную отписываться от подписки на вашем компоненте. 

this.addressFormatList = this.addressService.getAddressFormatAll()

И на вашем компоненте. html, 

<mat-option
  *ngFor="let addressFormatItem of addressFormatList | async"
  [value]="addressFormatItem"
>
...