以下是一个示例,演示如何在Angular中根据添加顺序动态显示输入。
首先,在你的组件中定义一个空数组来保存输入的顺序:
inputOrder: string[] = [];
然后,在模板中使用*ngFor
循环遍历inputOrder
数组,并根据数组中的值动态显示输入框:
接下来,在添加新输入框的方法中,将新的输入框名称添加到inputOrder
数组中:
addInput(inputName: string) {
this.inputOrder.push(inputName);
}
最后,你可以在另一个方法或事件处理程序中调用addInput
方法,将新输入框的名称传递给它,以便在界面上动态添加新的输入框:
onAddInput() {
const newInput = 'input' + (this.inputOrder.length + 1);
this.addInput(newInput);
}
这是一个完整的组件示例:
import { Component } from '@angular/core';
@Component({
selector: 'app-dynamic-form',
template: `
`,
})
export class DynamicFormComponent {
inputOrder: string[] = [];
addInput(inputName: string) {
this.inputOrder.push(inputName);
}
onAddInput() {
const newInput = 'input' + (this.inputOrder.length + 1);
this.addInput(newInput);
}
}
这样,每次点击“添加输入”按钮时,都会在界面上动态添加一个新的输入框,并按照添加的顺序进行显示。