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独有的东西，然后将其从模型中删除。

所以如果你有类似下面的内容

rdd2

控制器中的

 <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>

Answer 2

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

以下是它的工作原理：

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

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

2 个答案: