在 Angular 11 中获取 API 响应之前执行下一行代码答案

【问题标题】：Next lines of code executes before getting API response in Angular 11在 Angular 11 中获取 API 响应之前执行下一行代码
【发布时间】：2021-06-29 23:58:53
【问题描述】：

在我的表单中有一些复选框。复选框是根据从 API 响应中获取的值动态生成的。如果 API 响应不为 null 并且有一些值，那么我想让复选框成为必需的。但 API 响应返回 null 值，则不需要该复选框。这是我想要的形式。所以我写了下面的代码。

Roles: RoleInfo[] = [];

ngOnInit(): void {
    this.createForm();
    
    this.accountSubscription = this.regService.getRoles().subscribe(data => {
            if (data) {
                this.Roles = data;
            }
        });
    
    if (this.Roles.length > 0) {
        this.arrayInput.setValidators(Validators.required);
    }
    else {
        this.arrayInput.setValidators(null);
    }
    
    this.arrayInput.updateValueAndValidity();
}

但问题是它不等待 API 响应并执行下一行代码。所以复选框总是设置为不需要。我该如何解决这个问题？

【问题讨论】：

您需要将检查角色长度的 if 语句放入订阅回调中。
我不想要它。因为代码太多我没有放在这里简化。
那么您需要重新构建您的代码，以便在您的 if 语句之前在 getRoles 函数上添加某种等待。您可以将 if 语句放在 subscribe 回调中，也可以使用 async await。
除了使用异步等待还有其他方法吗？有没有 RXJS 算子来做这些事情？
如果“你不想要”也没关系。你必须这样做，否则它不会工作。如果有“这么多代码”，这可能是一个提示，您应该重构代码并将其分解为更小的部分......

标签： angular angular-observable

【解决方案1】：

API 调用完成后，您必须检查角色。

Roles: RoleInfo[] = [];

ngOnInit(): void {
    this.createForm();
    
    this.accountSubscription = this.regService.getRoles().subscribe(data => {
            if (data) {
                this.Roles = data;
                this.checkRoles();
            }
        });
    
    
}

checkRoles() {
  if (this.Roles.length > 0) {
        this.arrayInput.setValidators(Validators.required);
    }
    else {
        this.arrayInput.setValidators(null);
    }
    
    this.arrayInput.updateValueAndValidity();
}

【讨论】：