Angular 6 - 更改变量但不刷新视图答案

【问题标题】：Angular 6 - changing the variable but doesn't refresh the viewAngular 6 - 更改变量但不刷新视图
【发布时间】：2019-02-28 02:07:55
【问题描述】：

我有一个数组变量，其中包含对象，就像这样：

[{name: 'Name 1', price: '10$'}, {name: 'Name 2', price: '20$'}, ...]

我有一个视图，它打印出产品列表，如下所示：

<div *ngFor="let item of items">
   {{item.name}} - {{item.price}}
</div>

这只是一个例子，但问题的“模型”是相同的：

如果我从代码中更改“项目”数组（例如，因为发生了外部事件），变量值会发生变化，但视图不会刷新:(。

我怎样才能做到这一点？

编辑：

changeArray() 只包含一行：

changeArray(items) : void{ this.items = items; }

也许问题是，我从另一个组件调用 A 的这个方法？所以，在组件'B'中，我有这样一行：

a.changeArray(items);

【问题讨论】：

向我们展示items 数组是如何在您的代码中修改的。
我有一个组件“A”，我从组件“B”调用 A.changeArray() 函数。变量 a.items 会发生变化，但视图不会更新。
在问题中包含changeArray()的代码。
你是如何在 B 的构造函数中引用组件 A 的？请显示代码的相关部分以便于调试
我强烈建议你使用输入和输出。我不推荐从孩子那里调用方法。它会产生各种复杂性和副作用。除此之外，在什么样的事件中，您将方法称为changeArray？

标签： javascript angular typescript binding

【解决方案1】：

强制刷新列表的一种方法是使用扩展运算符...

因此，在您更新组件中的（例如）items 属性后，请执行此操作，

// after items are updated logic, and assuming it is an array,
this.items = [...this.items];

这应该会刷新您的列表。

如果您提供完整的代码来复制问题，则可以微调这种强制更改方法。

更新：

根据您的 cmets，

将changeArray() 更新为此，

changeArray(items) : void{
  this.items = [...items];
}

更新2：

如果上述方法不起作用，也试试这个，

在定义changeArray()的组件中，将其添加到constructor并导入ChangeDetectorRef，

import { ChangeDetectorRef } from '@angular/core';

constructor(cRef: ChangeDetectorRef) {}

changeArray(items) : void{
  this.items = [...items];
  this.cRef.detectChanges();
}

希望它有效。

【讨论】：

当数组操作正确时可以避免这个问题，我认为强制更新不是一个好主意。
@RyanTsui 同意，但前提是提供了逻辑。如果您没有注意到，我已经用条件 cmets 更新了我的答案。
你的 2 个组件有什么关系。可能对他们的关系有更多的了解。还是制作可重现的代码？
好吧，理论上的问题：如果我从另一个组件调用A组件的方法，该方法的'this'变量与我从组件A本身调用该方法时相同吗？跨度>
这取决于您如何从另一个组件中引用该组件。如果你显示你的代码会更容易。

【解决方案2】：

Angular 期望数组是不可变的。您不能更改数组的内容，但需要创建一个新的（更改引用）。

作为一个例子，使用concat 返回一个新数组而不是push 来添加元素。

【讨论】：

我不知道为什么不工作:(但我做了以下事情：我有一个组件'A'，我从组件'B'调用 A.changeArray() 函数。变量 a.items将发生变化，但视图不会更新。