在Angular 2中,可以使用双向数据绑定和事件绑定来实现从HTML表格获取编辑后的数据。
首先,您需要在组件中定义一个数组来保存表格数据。然后,在HTML模板中使用*ngFor
指令来循环遍历数组,并将数据绑定到表格中的单元格。
接下来,您可以使用[(ngModel)]
指令将表格中的数据与组件中的数据进行双向绑定。这样,当用户编辑表格中的数据时,组件中的数据也会更新。
最后,您可以使用事件绑定来捕获用户对表格的编辑操作。例如,可以使用ngSubmit
事件绑定来捕获用户提交表单的事件,并在事件处理程序中获取编辑后的数据。
下面是一个示例代码:
在组件中:
import { Component } from '@angular/core';
@Component({
selector: 'app-table',
template: `
`
})
export class TableComponent {
tableData = [
{ name: 'John', email: 'john@example.com' },
{ name: 'Jane', email: 'jane@example.com' },
{ name: 'Bob', email: 'bob@example.com' },
];
onSubmit() {
console.log(this.tableData);
}
}
在模块中:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { TableComponent } from './table.component';
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [TableComponent],
bootstrap: [TableComponent]
})
export class AppModule { }
请确保将TableComponent
添加到你的AppModule
的declarations
数组中,并将FormsModule
添加到imports
数组中。
这样,当用户编辑表格中的数据并点击提交按钮时,onSubmit
方法将被调用,并打印出编辑后的数据。