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

Question

如何在Type ScriptIonic2应用程序中实现：

例如，如果我有btnNmb: number;，使用当前值9，然后在表单上动态创建9按钮home.html并将此特定9范围内的每个数字附加到每个生成的按钮button1value=1，用于button2value=2等，以将此value传递到函数fnc(value)中，并通过单击此动态创建的按钮将其分配给this.x变量fnc(value) { this.x = 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;
}

然后在 yout HTML 中，您将使用ngfor通过数组来显示许多按钮

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

如果您需要更多信息，这里是 NgFor 文档。希望这有帮助。