在Angular 9中,您可以使用模板驱动表单和Angular的数据绑定功能来动态添加行。下面是一个示例解决方案。
首先,在component.ts文件中定义一个空数组,用于存储动态添加的行数据。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
rows: any[] = [];
addRow() {
this.rows.push({});
}
removeRow(index: number) {
this.rows.splice(index, 1);
}
}
接下来,在component.html文件中使用ngFor指令循环渲染动态添加的行,并使用ngModel绑定每一行的值。
Column 1
Column 2
Actions
在上述示例中,点击"Add Row"按钮将在数组中添加一个空对象,ngFor指令会根据数组的长度动态渲染对应数量的行。每一行包含一个下拉框和一个文本输入框,通过ngModel与数组中的对象进行双向数据绑定。点击"Remove"按钮将从数组中移除对应的行数据。
这样,您就可以根据下拉框的值动态添加行了。