Angular 角度-每次执行函数时更改不同的值

以有角度的方式工作。漫威英雄组件具有以下代码

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>

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

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>

---

你想每次显示三行还是一行？你试过什么？考虑通过内部变量和数组的访问位置来跟踪点击。我不会留下一个答案，因为我认为这个问题是非常基础的，不会帮助任何其他用户，而不是你自己。你想要这样的东西吗？@PardeepJain一句话。@PardeepJain谢谢你这正是我想要的。请将代码作为答案发布，以便我可以将您的答案标记为“帮助接受”。非常感谢。

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>