Question

Type Script Ionic2申请中的可行方式：

如果我有btnNmb: number;，例如当前值9，则在9表单上动态创建home.html按钮，并附加此特定范围内的每个数字{{ 1}}为9 button1 value的每个生成按钮，=1 button2 value等，传递此{{1}在函数=2中，并通过点击此value

内的动态创建按钮将其分配给fnc(value)变量

Answer 1

您可以使用*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;
}

然后在你的HTML中，你将ngfor用于通过数组并显示一些按钮

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

如果您需要更多信息，请点击NgFor docs。希望这会有所帮助。

动态创建具有特定功能值的按钮数

1 个答案: