角度-插值不显示当前列表项

Question

我有一个非常小的应用程序，其中有两个按钮。一个按钮向列表中添加1，另一个按钮添加-1。此外，我正在显示列表的总和。

现在我有一个问题。我有一个列表的插值，新添加的值根本不显示，而是只显示初始化的默认值(见控制器(。

这是我的模板：

<p>Items: {{ list }}</p> <!--This is not updating-->
<p>Sum: {{ getSumOfList() }}</p>
<button (click)="addItem(1)">Add 1</button>
<button (click)="addItem(-1)">Add -1</button>

相应的控制器类如下所示：

export class HomeComponent implements OnInit {
list: number[] = [1, 2, 3, 4, 5];
constructor() { }
ngOnInit(): void {
}
getSumOfList() {
var total = 0;
for (var i in this.list) { total += this.list[i]; }
return total;
}
addItem(item: number) {
this.list.push(item);
console.log(this.list);
}
}

如何使用插值语法显示列表中的所有项目？

Answer 1

使用类似的不可变语法

this.list = [...this.list, item];

• 您可以始终创建对数组的新引用，以允许触发OnChanges机制(更改检测(查看更多
• 只有当输入属性的实例发生更改时，OnChanges Lifecycle Hook才会触发，所以您必须有一个新的引用才能激活更改检测

工作演示