Question

我使用表格来显示集合的内容，使用*ngFor = let item in collection

在表格的底部，我有一个添加新行的按钮，该按钮会重定向到我的addNewLine()方法。

在这个方法中，我想让新行可编辑，并使每个单元格代表我的模型对象的属性。

我已经添加了新行，只需制作一个push(this.myModelObject)，但我无法使其可编辑。

由于

Answer 1

在你的ngFor中，你只是显示内容，所以如果你只是在你的收藏中推送一个新对象，那就不是你想要的了。

您应该在表的最后一行添加一个表单，并为新对象绑定一个空对象。成功将此新记录添加到集合中后，只需删除此新表单行即可。您可以使用ngIf显示新的换行符。

[更新添加的示例]

<form id="edit">
<table>
    <tr *ngFor.....  > display collection in tr </tr>
    <tr *ngIf="newRow">
        <th>Name: </th>
        <td>
            <input id="name" form="edit" type="text" ng-model="name" required>
        </td>
    </tr>
</table>
<button ng-click="newRow = true">New</button>
<button ng-click="save()">Save</button>

在save()方法中，您只需验证输入，推送到集合中，并将newRow设置为false。

Angular 5 - 向表中添加新行，并使其可编辑

1 个答案: