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

我正在使用一个表来显示集合的内容，使用集合中的

*ngFor=let item

在表的底部，我有一个添加新行的按钮，它重定向到我的

addNewLine（）

方法

在该方法中，我希望使新行可编辑，并使每个单元格表示模型对象中的一个属性

我已经添加了新行，方法是执行

推送（this.myModelObject）

，但我无法使其可编辑

---

感谢您的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>

在tr中显示集合
姓名：
新的
拯救

在

save（）

方法中，您只需验证输入，推入集合，然后将

newRow

设置为false