将值重新分配到 Angular 中的列表的问题答案

【问题标题】：Problem with reasigning value to a list in Angular将值重新分配到 Angular 中的列表的问题
【发布时间】：2020-09-17 08:15:48
【问题描述】：

您好，我有一个从后端获得的项目列表 listOfPhasesWithTasks。我将它分配给了我在项目的其余部分中使用的局部变量filteredPhasesWithTasks。它应该作为备份工作。当我像这样进行过滤时：

 this.filteredPhasesWithTasks.forEach((phase) => {
                    phase.tasks = phase.tasks.filter(task => task.taskName !== null && task.taskName.toUpperCase().includes(filterParam.taskName.toUpperCase()));
                });

我不明白为什么这也会改变我的 listOfPhasesWithTasks。我希望它只会改变 filterPhasesWithTasks 的代码。

【问题讨论】：

您可以通过使用Array.prototype.map 并返回新的phase 对象而不是像phase.tasks = 进行修改来解决此问题。您将对象传播const newPhase = { ...phase }; 结合过滤器创建新对象，该过滤器也返回一个新数组。
你能在 StackBlitz 中创建一些工作示例，包括日期大致是什么样子，然后我可以尝试帮助提供解决方案

标签： html typescript angular7

【解决方案1】：

在 Javascript（和 Typescript）中，对象被传递 by reference。

这意味着如果您有一个对象并将其分配给一个新对象，您不会复制该对象，您只需从两个变量中引用第一个对象。因此，更改您分配的变量之一中的字段“同时更改它”。实际上，将其更改为两个变量都指向的唯一现有对象：P

您可以考虑使用库Lodash 提供的cloneDeep 方法。你会在那里找到很多其他有用的快捷方式:)

【讨论】：

也许会展示一个示例，说明如何使用 Array.prototype.map 或类似名称来避免修改原始/备份 phase
谢谢，但我不想在项目中加入新库 :) 我更喜欢使用 Angular 7 方法来做，没有任何外部库