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

Question

我们可以使用 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>

在Component.ts中：

onClickRemove($event) {
}

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

Answer 1

根据你的问题，你想在按下删除按钮时删除该行。在 Angular 中，您必须做的是从模型中删除记录。因此，为此只需传递 ng-controller 独有的行 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>

在控制器中

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

Answer 2

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

工作原理如下：

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

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

Angular2 - Delete Row Or Column Where the delete button was clicked

jquery

angular2-template

angular