Блог

У меня есть 3 секции, исходящие из цикла. Также у меня есть 3 кнопки. Здесь мне нужно показать только первый раздел («один») по умолчанию, и первая кнопка должна быть активна/отключена.Когда я нажимаю вторую кнопку, должен отображаться только второй раздел, а вторая кнопка должна быть активна/отключена..и так далее.До сих пор работал нормально.Но у меня также есть кнопка «вниз», при нажатии на которую кнопка 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>
 

приложение.компонент.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() {}
}
 

Добавьте этот метод в свой app.component.ts .

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

и измените кнопку со стрелкой вниз, как показано ниже.

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

Это образец стекблитца.

Просто так

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

Это активирует следующий раздел при каждом нажатии этой кнопки.