Angular 6 - 数据更改后绑定项不更新

Question

在我的 HTML 中，我正在重复绑定一个项目：

<ul *ngFor="let item in items">
    <li>{{ item.id }}</li>
</ul>

这工作正常。但现在该值在 API 调用中被更改，如下所示：

doApiCall(){
    let value = this.items.find( x => x.id = '123');
    this.service.doIt().subscribe(
        (res: HttpResponse<myModel>) => {
            // response === { id = 456' }
            return value = res.body;
        }
    )
}

现在数组中的项目已经改变，但视图没有改变。但有趣的是，如果我在设置后立即手动更改let value，如下所示：

let value = this.items.find( x => x.id = '123');
value.id = '345'

然后更新发生。所以我不知道我在 API 调用中是否做错了什么。

Answer 1

您似乎需要刷新 JavaScript 的工作原理。您正在返回 value = res.body 值。但那是什么？那甚至行不通。

似乎items 是引用类型的对象数组。当您尝试执行 value = res.body 时，您根本不会更改 items 数组中的任何内容。您只是重新分配存储在 value 变量中的引用，但您使用 Array.find 函数找到的项目未受影响。也许你应该尝试做类似的事情

doApiCall() {
    let value = this.items.find(x => x.id = '123');
    this.service.doIt().subscribe(
        (res: HttpResponse < any > ) => {
            value.id = res.body.id;
            value.someproperty = res.body.property;
        }
    )
}

但我不知道您的HttpResponse.body 型号。这就是为什么您应该从服务响应Promise<T> 而不是HttpResponse<any>。你正在使用 TypeScript，所以让它变得有用！