Question

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

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

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

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

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

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

我该如何做？

编辑：

changeArray（）仅包含一行：

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

也许问题是，我从另一个组件中调用了A的这种方法？因此，在组件“ B”中，我有一行如下：

a.changeArray(items);

Answer 1

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

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

Answer 2

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

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

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

这应该刷新您的列表。

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

更新：

根据您的评论，

将changeArray()更新为此，

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

UPDATE2：

如果上述方法无效，也可以尝试

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

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

constructor(cRef: ChangeDetectorRef) {}

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

希望它能起作用。

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

2 个答案: