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

在 Controller 中

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