Служба .NET не вызывается при выборе события mat-select selectionChange

Question

У меня есть 3 раскрывающихся списка на странице (которые загружаются из вызова API), и мне нужно вызвать другой сервис API из одного DD для события selectionChange, в котором я использую значение из DD, чтобы вернуть модель/ данные мне нужны для того, чтобы заполнить / установить поле ввода.Код Angular фиксирует нужное мне значение, и при вызове службы API служба не вызывается (.NET API в режиме отладки).

В целях тестирования я удалил forkJoin и использовал только1 раскрывающийся список, и он работает (служба .NET API вызывается в режиме отладки), но когда я представляю другие раскрывающиеся списки с помощью forkJoin, он не работает.Не уверен, почему, любая помощь очень ценится.Я также добавил его в ForkJoin, и если я сделаю его раскрывающимся для целей тестирования, он будет работать без проблем.

    <mat-form-field fxFlex="30">
          <mat-select formControlName="column1" placeholder="column1" (selectionChange)="onChange($event)" >
              <mat-option>Clear</mat-option>
              <mat-option *ngFor="let column1 of column1$ | async[value]="column1._id">{{ column1.title }}</mat-option>
          </mat-select>
          <mat-error*ngIf="submissionStatusForm.get('column1').hasError('required')">column1 is<strong>required</strong></mat-error>
        </mat-form-field>

 <mat-form-field fxFlex="30">
            <input matInput placeholder="Column2" formControlName="column1" />
        </mat-form-field>

export class AddTestComponent1 implements OnInit {
  headers: string[];
  submissionStatusForm: FormGroup;
  matcher = new FormErrorStateMatcher();
  isUpdateOperation: boolean;
  isSubmited: boolean;
  control: AbstractControl;
  column1$: any;
  column2: any;
  column3: any;
  column4: any;

constructor(
    @Inject(MAT_DIALOG_DATA) data,
    private fb: FormBuilder,
    private activatedRoute: ActivatedRoute,
    private dialog: MatDialog,
    private dialogRef: MatDialogRef<AddTestComponent1>,
    private utilityService: UtilityService,
    private localStorageService: LocalStorageService,
    private apiService: ApiService,
    public userAccessService: UserAccessService
  )
  {
    this.submissionStatusForm = this.fb.group({
      column1: fb.control(null, 
      {validators: [Validators.required],
      updateOn: 'blur',
      }),
      column2: fb.control(null
      ),
      column3: fb.control(null, 
         {validators: [Validators.required],
        updateOn: 'blur',
      }),
      column4: fb.control(null, 
        {validators: [Validators.required],
        updateOn: 'blur',
      }),
    });

    this.loadDropDowns();

  }
}

loadDropDowns()
  {
    this.column1$ = this.apiService.getAll(this.headers,API_NAME_COLUMN_1);
    forkJoin(
      this.apiService.getAll(this.headers, API_NAME_COLUMN_3),
      this.apiService.getAll(this.headers, API_NAME_COLUMN_4)
    ).subscribe(([column3, column4]) => {
      this.column3 = column3;
      this.column4 = column4;
    }, (error) => this.error_handle(`Unable to load data`));
   }

onChange(args)
  {
    const data: any = {
          Id_1: args.value,
          Id_2: 1
        };
    this.column2 = this.apiService.getName(this.headers, API_NAME, data);
    this.submissionStatusForm.patchValue({'column2':this.column2.label});
  }

Ожидаемые результаты должны быть текстом, необходимым из веб-службы, ноСервис API не вызывается.Я проверил код и, похоже, не вижу никаких сообщений об ошибках, но продолжу отлаживать и исследовать.Спасибо за вашу помощь в этом.

Answer 1

Чтобы вызвать API, мне нужно было изменить второе поле на mat-select и добавить '|async 'to ngFor:

*ngFor="let class of column2Test$ | async"....

Единственная проблема, с которой я сейчас сталкиваюсь, это то, что я хотел бы отобразить текст в выпадающем списке column2.Поле заполнено, но я должен нажать на поле, чтобы увидеть значение.Я нашел patchValue, setValue, но они не работают.

this.column2Test$ = this.apiService.getName(this.headers, API_NAME, data);
this.submissionStatusForm.patchValue({'column2':this.column2Test$.label});
this.submissionStatusForm.setValue({'column2':this.column2Test$.label);

Спасибо

Answer 2

попробуйте использовать onSelectionChange, а не selectionChange, это может помочь :)

(https://stackoverflow.com/a/50617063/2929192)