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方式,您必须做的是从模型中删除记录.因此,只需将行ID传递给ng-controller独有的东西,然后将其从模型中删除.

所以,如果你有类似下面的东西

 <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).它跟踪所有视图绑定,并记住每个绑定的最后一个值.
• 触发事件时,将执行事件处理程序/回调函数.当它完成时,由于Zone.js猴子修补,它然后调用Angular的变化检测算法.该算法遍历树(一次)并使用这些更改检测器对象查找更改.如果发现任何更改,则在必要时更新组件(例如,如果输入属性已更改),然后更新DOM.
• 更改检测结束,浏览器再次获得控制权,查看DOM更改并更新您在屏幕上看到的内容.