要在Angular 7中动态生成表格并实现删除行的功能,可以按照以下步骤进行操作:
创建一个新的组件,例如dynamic-table.component.ts
,用于生成动态表格。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dynamic-table',
templateUrl: './dynamic-table.component.html',
styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent implements OnInit {
tableData: any[] = [];
constructor() { }
ngOnInit() {
}
addRow() {
this.tableData.push({});
}
deleteRow(index) {
this.tableData.splice(index, 1);
}
}
在新组件的模板文件dynamic-table.component.html
中,使用*ngFor
指令来动态生成表格行,并通过index
参数将行的索引传递给删除按钮的点击事件。
{{ row }}
在需要使用动态表格的父组件中,引入并使用DynamicTableComponent
组件。
通过以上步骤,你可以在Angular 7中动态生成表格,并通过点击事件来删除表格行。