Angular 4拼接复制数组对象答案

【问题标题】：Angular 4 splice duplicating array objectsAngular 4拼接复制数组对象
【发布时间】：2018-12-02 11:49:53
【问题描述】：

我为这个问题简化了一些代码。

    this.getDataRuleList.splice(this.count, 1, dataRuleData);
    console.log(this.getDataRuleList);
    this.count += 1;

getDataRuleList 正在从服务返回一个对象数组。它也可以毫无问题地绑定到 PrimeNg TurboTable。

    // get method to get service collection
    get getDataRuleList(): IDataRule[] {
      return this._dataRuleListService.dataRuleList;
    }

当我编辑一行时，我试图通过用新对象替换整个对象来更新绑定数组 (getDataRuleList) 中的对象。我为此使用了拼接方法。问题是，我替换的每个对象都变得相同（请参阅图片以获得更好的理解）。我粘贴在拼接值位置的值每次都不同（dataRuleData），但我所有的数组元素都变成了这个值。我假设它与引用有关，但我怎样才能避免这种情况发生？

image of issue

【问题讨论】：

标签： angular typescript splice

【解决方案1】：

你可以clone a new object

const cloneData = Object.assign({},dataRuleData);
this.getDataRuleList.splice(this.count, 1,cloneData);

如果您需要使用深度克隆，可以查看this example

const deepCloneData = JSON.parse(JSON.stringify(obj1));

【讨论】：

效果很好！非常简单和干净的解决方案。非常感谢。
@Michael 我建议你使用@baj9032 answer，使用起来很简单:)

【解决方案2】：

可以es6拼接操作符进行克隆

示例

const cloneData = {...dataRuleData};

【讨论】：