如何在不使用 JQuery 函数的情况下以 Angular 4 进行深度复制？ [复制]答案

【问题标题】：How to deep copy in angular 4 without using JQuery functions? [duplicate]如何在不使用 JQuery 函数的情况下以 Angular 4 进行深度复制？ [复制]
【发布时间】：2018-05-30 21:11:38
【问题描述】：

我有一个 hero 数组，我通过 *ngFor 在列表中显示它，当我单击其中一个元素时，它复制到新变量上，新变量通过牵引方式绑定进入输入。我的英雄类：

export class Hero {
    id: number;
    name: string;
  }

我的英雄模拟列表：

import { Hero } from './heroClass';

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

我的英雄组件：

   import { Component, OnInit } from '@angular/core';
    import { Hero } from '../hero';
    import { HEROES } from '../mock-heroes';

    @Component({
      selector: 'app-heroes',
      templateUrl: './heroes.component.html',
      styleUrls: ['./heroes.component.css']
    })
    export class HeroesComponent implements OnInit {

      heroes = HEROES;

      selectedHero: Hero;


      constructor() { }

      ngOnInit() {
      }

      onSelect(hero: Hero): void {
        this.selectedHero = hero;
      }
    }

heroes.component.html

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<div *ngIf="selectedHero">

  <h2>{{ selectedHero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name">
    </label>
  </div>

</div>

问题是当我选择一个英雄并在文本输入中显示它的副本并将其更改为所选列表的英雄时。

在 angularjs 1 中，我通过使用 angular.copy() 内置方法来防止这个问题，但在 angular 2 中，我必须创建新的 Hero 并将 selectedHero 的属性归因于主要英雄：

  selectedHero: new Hero();
onSelect(hero: Hero): void {
        this.selectedHero.name = hero.name;
         this.selectedHero.id= hero.id;
      }

在不使用 jquery 或 js 函数及以上方式的情况下，还有其他方法可以在 Angular 2 中进行深度复制吗？

【问题讨论】：

我不想使用js函数
与任何其他 JS 应用程序中的方式相同。提供通用帮助函数不是框架的责任。 AngularJS 试图模拟 jQuery API 并提供 copy 和 extend 的事实不应被考虑在内，这意味着那里出了问题。
您正在使用 JavaScript 框架并且不想使用 JavaScript 函数？什么？
这是有角度的 - 不是 angularJS @estus
@LazarLjubenović angularJS 是一个 javascript 框架 - angular 是打字稿......是的，它编译为 javascript，我明白了，但是搜索打字稿特定的答案是可以接受的。

标签： angular typescript clone deep-copy

【解决方案1】：

在我看来这很 hacky，但它确实有效。

this.selectedHero = JSON.parse(JSON.stringify(hero));

对于浅拷贝：您可以使用spread 运算符：

this.selectedHero = {...hero};
let {...example} = hero;

【讨论】：

展开操作符会做一个浅拷贝，这可能不是开发者想要的。 JSON 技巧会混淆日期和其他复杂对象，包括循环引用。

【解决方案2】：

使用lodash's cloneDeep 函数。

Angular 中没有任何东西可以深度克隆对象，因为提供这样的功能不是 Angular 关心的。

【讨论】：