Angular 6 - 更改变量但不刷新视图
Posted
技术标签:
【中文标题】Angular 6 - 更改变量但不刷新视图【英文标题】:Angular 6 - changing the variable but doesn't refresh the view 【发布时间】: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
?
【参考方案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将发生变化,但视图不会更新。以上是关于Angular 6 - 更改变量但不刷新视图的主要内容,如果未能解决你的问题,请参考以下文章