Angular如何将后端传递的多条内容不同并且属性名不同的数据放在同一个表格里面不能使用ngfor指令,并且可以实现编辑功能,编辑后还可以将数据传给后端
时间: 2023-06-17 17:08:43 浏览: 123
Angular使用操作事件指令ng-click传多个参数示例
可以使用Angular中的数据绑定来实现将后端传递的多条内容不同并且属性名不同的数据放在同一个表格里面,并且可以实现编辑功能,编辑后还可以将数据传给后端。
首先,你需要在组件中定义一个数组来存储从后端传递过来的数据,例如:
```
dataList: any[] = [
{id: 1, name: 'John', age: 20},
{id: 2, name: 'Mary', age: 25},
{id: 3, name: 'Tom', age: 30}
];
```
然后,在HTML模板中,你可以使用ng-container来包裹每一列数据,例如:
```
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let data of dataList">
<tr>
<td>{{ data.id }}</td>
<td>{{ data.name }}</td>
<td>{{ data.age }}</td>
<td>
<button (click)="editData(data)">Edit</button>
</td>
</tr>
</ng-container>
</tbody>
</table>
```
在上面的代码中,我们使用ngFor指令遍历dataList数组,并使用ng-container包裹每一列数据,这样我们就可以将不同属性名的数据放在同一个表格里面。
为了实现编辑功能,我们给每一行的Edit按钮绑定了一个editData方法,例如:
```
editData(data: any) {
// TODO: 编辑数据的操作
}
```
在editData方法中,你可以弹出一个编辑框来编辑数据,并将编辑后的数据传递给后端保存。
希望这个回答对你有所帮助!
阅读全文