Jquery Angular2-删除单击删除按钮的行或列

我们可以使用jquery轻松地删除类似的内容，但是我们可以使用angular来执行类似的操作吗

<tr>
<td *ngFor="#lev of rubric?.criteria[0].levels">
                    <button class="close removeLevel" (click)="onClickRemove($event)">&times;</button>
                    <input type="text" class="form-control" placeholder="Performance Level"
                           #level="ngForm"
                           [(ngModel)]="lev.level"
                           ngControl="level"
                    />
</td>
</tr>

---

如何在此处访问引发事件的行或单元格元素？

根据您的问题，您希望在按下删除按钮时删除该行。 从某种角度来说，您必须做的是从模型中删除记录。因此，只需传递ng控制器特有的行id，并将其从模型中删除

所以如果你有下面这样的东西

 <td *ngFor="#lev of rubric?.criteria[0].levels">
                    <button class="close removeLevel" ng-click="onClickRemove($index)">&times;</button>
                    <input type="text" class="form-control" placeholder="Performance Level"
                           #level="ngForm"
                           [(ngModel)]="lev.level"
                           ngControl="level"
                    />
</td>

---

使用Angular之类的更改检测框架的好处在于，您只需修改模型，视图就会自动更新。不需要自己修改DOM

下面是它的工作原理：

• Angular用于修补（截取）Angular内部发生的所有浏览器异步事件（如鼠标单击）。因此，我们在组件中放入的任何事件绑定都将被修补
• Angular构建了一个组件树，树中的每个节点都有一个变更检测器对象（您可以通过注入获取对它的引用）。它跟踪所有视图绑定，并记住每个绑定的最后一个值
• 触发事件时，将执行事件处理程序/回调函数。当它完成时，由于Zone.js monkey补丁，它会调用Angular的更改检测算法。该算法遍历树（一次），并使用这些变更检测器对象查找变更。如果发现任何更改，它会在必要时更新组件（例如，如果输入属性已更改），然后更新DOM
• 更改检测结束后，浏览器再次获得控制权，查看DOM更改并更新屏幕上显示的内容

---

对于未来的观众，这是我最后的代码：onClickRemove（$event）{var node=$event.target.parentNode；var index=node.cellIndex-1；For（let i=0；i <td *ngFor="#lev of rubric?.criteria[0].levels"> <button class="close removeLevel" ng-click="onClickRemove($index)">&times;</button> <input type="text" class="form-control" placeholder="Performance Level" #level="ngForm" [(ngModel)]="lev.level" ngControl="level" /> </td>

$scope.onClickRemove=function(index)
{
   //Replace your model here 
   rows.splice(index, 1);
}