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

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];
}

更新2：

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

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

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

constructor(cRef: ChangeDetectorRef) {}

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

希望它有效。