Question

在Angular中工作。 Marvel-Hero Component具有以下代码

export class MarvelHerosComponent implements OnInit {

  hero = ["IronMan","Hulk","Thor"]   


    ChangeHero() {
        this.hero[1] = "Black Panther"
    }

}

在组件的html文件中，我具有以下代码，并将事件放置在按钮上

<p>Hero 1 is {{hero[0]}}</p>
<p>Hero 2 is {{hero[1]}}</p>
<p>Hero 3 is {{hero[2]}}</p>

<button class="btn btn-success" (click)="ChangeHero()">Change Hero</button>

我要实现的是每次单击“更改英雄”按钮时，数组的值都会一次更改

示例：当我单击“更改英雄”按钮
第一次：钢铁侠改为黑豹
第二次：绿巨人改用黑豹
第三次：雷神（Thor）换成黑豹（Black Panther）

此外，如果我没有为Hero使用数组，而是使用hero1，hero2作为我的变量，那么每次点击都会改变值吗？

我尝试过使用for循环并将变量的值插入

this.hero[x]

但这只会进一步造成混乱。我无法为此创建逻辑。

Answer 1

ChangeHero() {
      this.counter++;
      if (this.counter >= this.hero.length){
        this.counter = 0;
      } else {
        this.showHero = this.hero[this.counter]
      }

<p> {{showHero}} changes to Black Panthe</p>
<button class="btn btn-success" (click)="ChangeHero()">Change Hero</button>

Working Example

角度-每次执行功能时更改一个不同的值

1 个答案: