如何通过单击单个按钮触发来自循环的按钮的单击

Question

我有 3 个部分来自循环。我也有3个按钮。在这里，我需要默认只显示第一部分（'one'），第一个按钮应该是活动/禁用的。当我点击第二个按钮时，第二部分应该只显示，第二个按钮应该是活动/禁用......等等。直到现在工作很好。但我也有一个“向下按钮”，点击它时，click2 按钮将被触发，再次单击“向下按钮”click3 按钮将被触发。这是下面的代码

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div *ngFor="let data of testJson">
  <div *ngIf="data.id==button_selected">
    {{data.name}}
  </div>

</div>

<div style="margin-top:10px">
  <button *ngFor="let data of testJson"
  style="display:block"
  (click)="button_selected=data.id"
  [disabled]="button_selected==data.id"
  >
    click {{data.id}}
  </button>
</div><br>
<div><button>Down arrow</button></div>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  button_selected = 1;
  testJson = [
    {
      id: 1,
      name: 'one'
    },
    {
      id: 2,
      name: 'two'
    },
    {
      id: 3,
      name: 'three'
    }
  ];
  name = 'Angular';
  ngOnInit() {}
}

Answer 1

在您的 app.component.ts 中添加此方法。

  down() {
    if (this.button_selected < this.testJson.length) {
      this.button_selected++;
    }
  }

并修改您的向下箭头按钮，如下所示。

<div><button (click)="down()">Down arrow</button></div>

这是stackblitz sample。

Answer 2

就是这样

<button (click)="button_selected++">Down arrow</button>

每次点击此按钮时都会激活下一部分。