Question

我正在关注angular.io（http://angular.io/tutorial/）的Angular教程，我正在尝试改变一个充满'英雄'的数组。我找到了一个随机化我的数组的shuffle函数，但是一旦我使用这个函数，我的本地（？）英雄数组应该是随机的，但它似乎随机化了我的整个英雄数组在两个组件中。

任何人都可以解释发生了什么，以及如何在一个组件中随机化数组而不更改数组并在另一个组件中保持相同的顺序？

我把代码放在Plunker上：https://plnkr.co/edit/4ldD1pvoAPsY12MOeznP?p=preview （不知怎的，我不能让它运行，在我的电脑上工作正常）（*链接已更新）

谢谢！

服务：

export class HeroService {
  getHeroes(): Promise<Hero[]> {
    return Promise.resolve(HEROES);
  }

组件1：

  heroes: Hero[] = [];

  constructor(private heroService: HeroService) { }

  ngOnInit(): void {
    this.heroService.getHeroes()
      .then((heroes) => {
        this.heroes = this.shuffle(heroes).slice(1,5) });

  }

  shuffle(array:Array<any>){
    var currentIndex = array.length, temporaryValue, randomIndex;
    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  }
}

组件2：

ngOnInit(): void {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes().then(heroes => this.heroes = heroes;
  }

为什么Angular2中的非操作组件中的数组会发生变化？

0 个答案: