在 mat-select selectionChange 事件上未调用 .NET 服务

Question

我在页面上有 3 个下拉菜单（从 API 调用加载），我需要在 selectionChange 事件中从一个 DD 调用不同的 API 服务，在该事件中我使用 DD 中的值来恢复模型/data 我需要填充/设置输入字段。 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});
  }

预期结果应该是 Web 服务所需的文本，但未调用 API 服务。我已经检查了代码，似乎看不到任何错误消息，但会继续调试和调查。感谢您在这方面的帮助。

Answer 1

尝试使用onSelectionChange，而不是selectionChange，这可能会有所帮助:)

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

Answer 2

为了调用 API，我必须将第二个字段更改为 mat-select 并添加 ' | async ' 到 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);

谢谢