Angular中点击事件内联调用异步函数赋值问题求助

问题描述 #

在嵌套ng-template渲染的多层复杂对象（如评论的嵌套层级结构）中，尝试通过点击事件内联调用异步函数为变量赋值，但因为对象结构复杂，无法在函数返回后通过键或ID定位对象完成赋值。

当前使用的模板代码：

<button (click)="c.state = callState(c)">Check</button>

异步函数的几种写法（均导致相同问题）：

async callState(c:any){
 let a = await http.call();
 return  Promise.all([a]);
}

async callState(c:any){
  await http.call().then((res:any)=>{
    return res;
  });
}

async callState(c:any){
 let a = await http.call();
 return  a;
}

问题现象：视图始终显示[object Promise]，检查后发现c.state的值是ZoneAwarePromise对象，预期应该显示HTTP请求返回的字符串。

原因分析 #

async函数本质是返回一个Promise对象，直接在点击事件中把callState(c)的结果赋值给c.state，拿到的只是未完成的Promise实例，而非异步请求的最终结果。

解决方案 #

不要在模板的点击事件中直接赋值，而是在异步函数内部直接修改传入的c对象的state属性：

修改后的异步函数：

async callState(c: any) {
  // 等待HTTP请求完成拿到结果
  const response = await http.call();
  // 直接修改传入对象的state属性
  c.state = response;
  // 如果你的请求返回的是数组（比如用了Promise.all），则改为 c.state = response[0]
}

对应的模板代码调整为：

<button (click)="callState(c)">Check</button>

这样处理后，当HTTP请求完成时，会直接更新传入的c对象的state属性，Angular的变更检测机制会自动触发视图更新，最终显示正确的字符串结果。

内容的提问来源于stack exchange，提问作者jolly