Элемент управления угловой формы не обновляет пользовательский интерфейс только значение

Question

У меня есть такая форма:

this.filterFormGroup= this.formBuilder.group({
      gmt_scope: [''],
      priority: [''],
      region: [''],
      category: [''],
      status: [''],
      original_deadline: [''],
      responsibles: [''],
      pms: [''],
      updated_at: ['']
    });

Форма заполняется через API:

<form [formGroup]="filterFormGroup" >
          <div fxLayout="row" fxLayoutWrap="wrap" fxLayout="center center"  class="row">
            <div fxFlex.gt-sm="20" fxFlex="100" class="p-10" fxLayoutAlign="center center">
              <!-- <mat-slide-toggle color="primary" stepper="0" formControlName="gmt_scope">GMT SCOPE</mat-slide-toggle> -->
              <mat-form-field>
                <mat-select  placeholder="GMT Scope" stepper="0" formControlName="gmt_scope" >
                  <mat-option *ngFor="let gmt_scope of gmt_scopes" [value]="gmt_scope.value" >
                    {{ gmt_scope.viewValue }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div fxFlex.gt-sm="20" fxFlex="100" class="p-10" fxLayoutAlign="start center">
              <mat-form-field>
                <mat-select placeholder="Priority" stepper="0" formControlName="priority">
                  <mat-option *ngFor="let priority of projectAttributes.priorities" [value]="priority.id" >
                    {{ priority.description }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>

Когда все готово, я читаю несколько queryParams и устанавливаю некоторые поля формы, напримерони:

setFiltersFromParams(params){
    if ('pms' in params){
      this.filterFormGroup.controls.pms.setValue(params.pms.split(","));
      console.log("Setting the following pms:",params.pms.split(",") )
    }
    if ('region' in params){
      this.filterFormGroup.controls['region'].setValue(params.region,{emitEvent: true});
      console.log("Setting the following region:",params.region )
    }

  }

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

Answer 1

Как вы сказали, ваш GUI не обновляет значения, но обновляются контрольные значения в переменной. Эта проблема связана с Обнаружением изменений .

. Сделайте одно, чтобы внедрить службу ChangeDetectorRef.на уровне компонента, т. е.

, определите private ChangeDetectorRef cd в конструкторе компонента.

и где вы производите обновление элементов управления программно в пользовательской функции события, вызывайте эту функцию следующим образом: cd.detectChanges().

перейдите по этой ссылке это будет полезно.