Динамически создавать количество кнопок с определенным значением для функции - PullRequest
Новая
       17

Динамически создавать количество кнопок с определенным значением для функции

0 голосов
/ 27 апреля 2018

Как это возможно в Type Script Ionic2 приложении:

Если у меня есть btnNmb: number;, например, с текущим значением 9, тогда динамически создайте 9 кнопки в форме home.html и прикрепите каждое число из этого конкретного диапазона 9 к каждой сгенерированной кнопке для button1 value =1, для button2 value =2 и т. Д., Чтобы передать эту value в функцию fnc(value) и присвоить ее переменной this.x нажатием на динамически созданную кнопку внутри этой fnc(value) { this.x = value; }

1 Ответ

0 голосов
/ 27 апреля 2018

Вы можете использовать *ngFor для достижения этой цели, но ngFor нужен массив или любой объект с итеративным интерфейсом, поэтому вот что вы можете сделать:

в вашем файле TypeScript: 

export class YourClass {
  public x = number;
  public btnNmb: number = 9;
  public btnsArray: Array<number> = []; // You need to initialize it so your template doesn't break

  constructor () {
    // You can call it here or on ionViewDidLoad() lifecycle hook
    // Or if the btnNmb is a dynamic number you can call it again when the value changes
    this.generateNumberArray();
  }

  // You need to iterate from 1 to the number given in the btnNmb property
  generateNumberArray = () => {
    for(var i = 1; i <= this.btnNmb; i++){
      this.btnsArray.push(i);
    }
  }

  // The function that's triggered by button click
  fnc = number => this.x = number;
}

тогда в yout html вы будете использовать ngfor для перехода по массиву и отображения количества кнопок 

<button ion-button *ngFor="let nmb of btnsArray" (click)="fnc(nmb)">{{nmb}}</button>

Вот документация NgFor , если вам нужна дополнительная информация. Надеюсь, это поможет.

...