角度和离子按钮单击分别浏览数据

时间:2018-08-31 12:04:51

标签: angular ionic-framework

我正在尝试学习这一点,但我想不通如何从数组中获取数据并通过数组索引仅在屏幕上显示当前值。屏幕上什么也没有开始。然后,当单击按钮时,它将运行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>

1 个答案:

答案 0 :(得分: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>