未在Mat-Select Selection上调用.NET服务

时间:2019-09-19 17:20:15

标签: angular

我在页面上有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服务。我已经检查了代码,似乎看不到任何错误消息,但将继续进行调试和调查。感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

尝试使用github.com/hyperledger/fabric-sdk-go而不是 require github.com/hyperledger/fabric-sdk-go latest 可能会有所帮助:)

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

答案 1 :(得分:0)

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

谢谢