Угловое и ионное нажатие кнопки проходит через данные индивидуально

Question

Я пытаюсь изучить это, и я не могу понять, как извлечь данные из массива и индексировать через него, показывая только текущее значение на экране. Где на экране начинать нечего. И когда кнопка нажата, она запускает функцию runit (), а затем вы видите 1, (нажмите еще раз) 2 и т. Д.

export class HomePage {
  public multipleOptions: Array < {
    option: any
  } > ;
  public currentValue: any;
  public currentOption: any;


  constructor(public navCtrl: NavController) {
    this.multipleOptions = [{
        option: '1'
      },
      {
        option: '2'
      },
      {
        option: '3'
      },
      {
        option: '4'
      },
      {
        option: '5'
      }
    ]
  }

  runit() {
    let currentValue = this.multipleOptions;
    console.log(currentValue);
    this.currentOption = currentValue;
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<h2>{{currentOption}}</h2>
<button ion-button large (click)='runit()'>Start</button>

Answer 1

export class HomePage {
  public multipleOptions: Array < {
    option: any
  } > ;
  public currentValue: any;
  public arrayIndex: any; 

  constructor(public navCtrl: NavController) {
    this.multipleOptions = [{
        option: '1'
      },
      {
        option: '2'
      },
      {
        option: '3'
      },
      {
        option: '4'
      },
      {
        option: '5'
      }
    ]
  }

  runit() {
    if(this.arrayIndex==null)
        this.arrayIndex = 0;
    else
        this.arrayIndex++;

    if(this.arrayIndex>=this.multipleOptions.length)
       this.arrayIndex = 0; //this is just to restart if you don't want this just block the increment

    this.currentValue = this.multipleOptions[this.arrayIndex].option;
  }

}

Html:

<h2>{{currentValue}}</h2>
<button ion-button large (click)='runit()'>Start</button>