状态更改的角度更新组件答案

【问题标题】：Angular update component on state change状态更改的角度更新组件
【发布时间】：2021-08-09 10:13:01
【问题描述】：

我正在开发我的第一个 Angular 应用程序，但在更新/重新渲染我的组件时遇到了一些问题。

在我的组件中，我有一个更新函数，它从我的后端获取资源并将结果保存在一个名为 taskList 的变量中。我希望每次调用此函数时都更新/重新渲染组件。

update = async () => {
    const url = 'http://localhost:3000/tasks/' + this.date.valueOf();
    const data = await fetch(url);
    const result = await data.json();
    this.taskList = result.tasks
};

我这样显示列表的值：

<div 
    <div 
        *ngFor="let tasks of taskList" 
        class={{tasks.color}}  
        {{tasks.text}}
    </div>
</div>

然后我有另一种情况，我将项目添加到列表中，然后调用更新函数。它成功更新了 taskList 变量，但不会重新渲染组件。

我尝试了网上找到的 ChangeDetectorRef 的不同实现，但没有成功。

【问题讨论】：

检查此链接以有角度地进行 HTTP 调用。 angular.io/api/common/http/HttpClient 。关于您的问题：如果您分享最小的复制示例，那就太好了。
我添加了更多关于如何使用数据以及问题所在的解释。 @AshotAleqsanyan
这个 html 模板会出现语法错误，如果它在代码中是这样的话

标签： angular typescript

【解决方案1】：

您可能想以 Angular 方式调用 api，我的意思是您可以放弃 async/await 并进行普通调用。

【讨论】：

【解决方案2】：

您可以尝试async 管道，它可用于更新可观察对象和您在此处执行的操作，使用 Promises。 *ngFor="let tasks of taskList | async"

话虽如此，如果你避免 Promise 并使用 Angular 中的 http 客户端和 observables，你的生活可能会更轻松。

【讨论】：