Angular克隆数组会自动更改

Question

我希望有一个基于可用复选框的活动状态的过滤器。

首先应该显示所有内容，在选择过滤器之后，在这种情况下，选择的英雄名称应该只显示包含至少名称的英雄。

有趣的是：如果我尝试将值更改回“完整” - 对象，则不会使用完整对象，而是更改版本。

我不知道那里发生了什么。因为我只在应用程序的构造函数中初始化了完整对象。对于全对象，我的意思是fullHeroes。

App.Component.ts：

import { Component, OnInit } from '@angular/core';

interface Hero {
    name: string;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
  readonly fullHeroes: Hero[] = [];
  heroes: Hero[] = [];

  constructor() {
    this.heroes.push(
        { name: 'Bob' }, { name: 'Alice' }, { name: 'Mallory' }
    );
    this.fullHeroes = this.heroes.slice(0);
}

filter(name, checked) {
    if (checked) {
        for (let i = 0; i <= this.heroes.length; i++) {
            let found = false;
            const currentHero = this.heroes[i];
            if (currentHero && currentHero.name === name) {
                found = true;
            }
            if (found) {
                this.heroes.splice(i, 1);
            }
        }
    } else {
        this.heroes = [];
        this.heroes = this.fullHeroes;
    }
    return;
  }
}

App.component.html：

   <div class="container">
    <h1>World of Heroes</h1>
    <p>Filter your Heroes based on names!</p>

    <div class="filter">
      <form #heroForm="ngForm">

        <fieldset>
          <legend>Choose the names</legend>
          <div class="form-check" *ngFor="let hero of heroes">
            <label class="form-check-label">
                <input  class="form-check-input" type="checkbox" [name]="hero.name" (change)="filter($event.target.name, $event.target.checked)"> {{hero.name}}
            </label>
          </div>
        </fieldset>

      </form>
    </div>

    <hr>
  <h2>Results:</h2>

    <div class="row result-list">
      <div class="col-md-4 hero" *ngFor="let hero of heroes">
        <h3>Name: {{hero.name}}</h3>
      </div>
    </div>
  </div>

Answer 1

如果要将数组this.fullHeroes克隆到数组this.heroes中，请使用：

this.heroes = JSON.parse(JSON.stringify(this.fullHeroes));

这样你就可以将this.fullHeroes数组的完整副本复制到this.heroes中，然后this.heroes中的更改不会影响其他数组。

Answer 2

this.heroes = this.fullHeroes

在执行该行之后，每次变异英雄时，你也会改变fullHeroes，因为它们都引用相同的数组。你需要复制fullHeroes。

请注意，你正在滥用map()，你应该使用forEach()。你正在使用一个循环，你可以使用some()。

Answer 3

您可以使用TypeScript spread运算符来克隆数组：

const a1 = [1, 2, 3, 4, 5, 6];
const a2 = [...a1];