时间戳

首页 > 解决方案 > 在 mat-select selectionChange 事件上未调用 .NET 服务

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

问题描述

我在一个页面上有 3 个下拉菜单（从 API 调用加载），我需要在 selectionChange 事件中从一个 DD 调用不同的 API 服务，在该事件中我使用 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});
  }

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

标签： angular

解决方案

In order for the API to be called, I had to change the second field to a mat-select and add ' | async ' to the ngFor:

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

The only problem I'm having now is I would like to display the text on the column2 drop down. The field is populated but I have to click on the field to see the value. I've found patchValue, setValue but those don't work.

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

Thanks

推荐阅读