在Angular 4中,要获取智能表格的编辑数据,可以按照以下步骤进行操作:
tableData: any[] = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Bob', age: 35 }
];
*ngFor
指令来遍历数据并显示表格的每一行:<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr *ngFor="let row of tableData">
<td>{{ row.id }}</td>
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
</tr>
</table>
<tr *ngFor="let row of tableData">
<td>{{ row.id }}</td>
<td>{{ row.name }}</td>
<td>{{ row.age }}</td>
<td><button (click)="editRow(row)">Edit</button></td>
</tr>
editRow(row: any) {
this.editData = { ...row }; // 使用对象扩展运算符复制行数据
}
editData
变量有值时,显示编辑表单,否则显示普通的表格:<table *ngIf="!editData">
<!-- 表格内容 -->
</table>
<form *ngIf="editData" (submit)="saveRow()">
<!-- 编辑表单 -->
</form>
[(ngModel)]
指令将输入框与数据绑定起来:<input type="text" [(ngModel)]="editData.name" name="name">
saveRow() {
// 更新表格数据
const index = this.tableData.findIndex(row => row.id === this.editData.id);
if (index !== -1) {
this.tableData[index] = { ...this.editData };
}
this.editData = null; // 清空编辑数据
}
通过以上步骤,你可以在Angular 4中获取智能表格的编辑数据。请注意,这只是一个基本示例,实际应用中可能需要根据具体需求进行适当的调整和扩展。
领取专属 10元无门槛券
手把手带您无忧上云