通过异步函数在单击中内嵌角度分配值

Question

我有一个非常独特的情况，即通过异步函数调用使用单击事件为内联变量赋值。我有 ng-template-for，其中在屏幕上呈现一组深度嵌套且复杂的对象（例如，评论的评论的评论等）。 因此，一旦函数返回，就不可能通过键或 id 获取对象并赋值。

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

功能如下：

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

其他 2 个函数变体返回相同的结果：

   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]。它应该传递一个字符串。经检查，值为：

ZoneAwarePromise
__zone_symbol__state: true
__zone_symbol__value: [{…}]

有人可以帮助将单击时内联的简单 http 调用中的字符串分配给视图变量吗？

Answer 1

.ts 文件

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'projecttest';
  public c: any = {};

  constructor(private http: HttpClient) { }

  async updateState(c: any) {
    const result: any = await this.callState(c);
    // Assuming the result is an array, update index accordingly
    return result[0].title;
  }

  async callState(c: any) {
    const a = await this.http.get('https://jsonplaceholder.typicode.com/todos/1').toPromise();
    return Promise.all([a]);
  }
}

html 模板

<button (click)="c.state = updateState(c)">Check</button>
<div>{{ c?.state |async }}</div>

在您的组件中，updateState 方法现在直接将解析值分配给 c.state。然后，在您的模板中，您将使用 AsyncPipe 在解析后自动解包并显示 c.state 的值。