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 - 更改变量但不刷新视图的主要内容,如果未能解决你的问题,请参考以下文章

在Angular2中更改组件变量后视图未更新

Angular 2组件模型刷新视图,无需模型更改

SwiftUI List 在任何视图更改时重置滚动

Angular2:变量更改时视图不更新

通过更改 SwiftUI 中的 @State 变量来刷新视图不起作用

检查 Angular SPA 视图更改的缓存清单更新