时间戳

首页 > 解决方案 > 订阅按钮内的角度订阅点击

angular - 订阅按钮内的角度订阅点击

问题描述

我目前有一个按钮，单击该按钮时我想调用服务：

  saveAssignment(formValues) {
if (this.rulesService.validate(3, 1)) {
    // continue to save
    console.log('trigger save');
    this.assignmentService.saveAssignment(formValues).subscribe((data) => {
    console.log('saved!');
  });
} else {
  alert('came in here instead');
    }
  }

规则服务：

validate(actionId: number, referenceId: number): boolean {
let hasErrors = false;
let result: any;
this.validateRulesAPI(3, 1).subscribe((data) => {
  // some logic here will set hasErrors property to true/false
});
    return hasErrors;
  }

ruleService 我希望它返回一个布尔值，无论它是否验证了参数，这样我就可以重用它，但问题是订单已关闭，因为代码在调用完成之前返回，这是另一种安排方式，所以他们互相等待？所以 rulesService.validate 将等待 bool 返回，然后如果它返回 true，则继续调用 saveAssignments？否则我会看到警报（'改为'来到这里'）命中，然后验证代码运行。

标签： angularrxjs

解决方案

你可以使用switchMappipeable 操作符rxjs来订阅一个内部 observable。

对于验证，您可以返回一个Observable映射到boolean相应的：

validate(actionId: number, referenceId: number): Observable<boolean> {
    return this.validateRulesAPI(actionId, referenceId).pipe(map(data) => {
         // Do the stuff and check for errors
         // if has error then  ------------>  return false
         // if does not have error then --->  return true
    });
  }

然后在saveAssignment方法中你可以使用switchMap

saveAssignment(formValues) {
    this.rulesService.validate(3, 1).pipe(
      switchMap((isValid) => {
           if(isValid){
                  return this.assignmentService.saveAssignment(formValues)
           }else{
                  return of(false);  // false or whatever the value you want to have
           }
      })
    ).subscribe((response) => {
        if(response === false){
            alert('Invalid'); // alert('came in here instead');
        }else{
            console.log(response);  // response of this.assignmentService.saveAssignment(formValues)  
        }
    })

希望这可以帮助。

推荐阅读