Как установить значение по умолчанию Mat-Select при получении параметров из API - PullRequest
0 голосов
/ 23 мая 2018

У меня есть следующий mat-select элемент управления, параметры которого динамически загружаются с сервера на ngOnInit:

      <mat-form-field class="full-width">
        <mat-select placeholder="Category" formControlName="patientCategory">
          <mat-option>--</mat-option>
          <mat-option *ngFor="let category of patientCategories" [value]="category">
            {{category.name}} - {{category.description}}
          </mat-option>
        </mat-select>

        <mat-error *ngIf="form.controls['patientCategory'].hasError('required')">
          Please select a category
        </mat-error>
      </mat-form-field>

Элемент управления является частью группы форм с именем form, которой я являюсьздание с this.formBuilder.group({}).Элемент управления находится внутри компонента с функцией, называемой populateStep.

populateStep(value: PatientStepModel) {
    // Set values of other controls..

    // Categories have been retrieved
    if (this.patientCategories.length > 0) {

      // Must set reference for MatSelect
      const toSelect = this.patientCategories.find(c => c.id == category.id);
      this.form.get('patientCategory').setValue(toSelect);

    } else {
      this.logger.trace('No categories exist, will set category at the end of HTTP call..');
      this.categoryToSelect = value.category;
    }
  }

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

Однако, если категории пусты, т. Е. HTTP-вызов все еще выполняется, я должен установить переменную categoryToSelect исделать такой же выбор внутри обратного вызова subscribe.

  private loadPatientCategories(): void {

    this.operationCategoryService.getAll()
      .subscribe(
        results => {
          this.patientCategories = results;

          if (this.categoryToSelect) {
            // Must set reference for MatSelect
            const toSelect = this.patientCategories.find(c => c.id == category.id);
            this.form.get('patientCategory').setValue(toSelect);
          }
        },
        error => {
          this.notificationService.openSnackBar('An error occurred');
        }
      );
  }

Я не доволен этим решением, так как оно требует от меня одного и того же в нескольких местах, есть ли лучшее решение?Возможно установить таймаут перед установкой категории?Хотя я не уверен, сколько времени займет HTTP-вызов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...