javascript - Angular，如何通过单击按钮隐藏表格行

Question

我有一个表，其中每一行都有一个删除按钮。单击按钮后，数据将被删除。但是，要验证记录是否已删除，我必须刷新页面。我想在单击删除按钮时隐藏当前行。这是我的代码。

<table>
    <tr>
        <th>Delete</th>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <tr *ngFor="let person of people" *ngIf="!hideRow">
        <td><button (click)="delete(person.id)" title="Delete">Delete</button></td>
        <td>person.Id</td>
        <td>person.Name</td>
    </tr>
</table>

在我的 component.ts 中，删除时我更改 hideRow 的值

delete(id) {  
  this.hideTr = true;
  this.personService.delete(id).subscribe(p=> console.log(p));
}

hideRow 是一个 bool 变量，默认值为 false。问题是，当我单击删除时，所有行都会被隐藏(当然)。我怎样才能只引用当前行？

Answer 1

当你想删除该行时，你应该实际删除它，而不是隐藏行。不需要 *ngIf="!hideRow"。你不需要刷新页面，这就是 AngularJS 的美妙之处。下面是删除特定行的代码。传递行的 $index:

HTML 代码:

<table>
    <tr>
        <th>Delete</th>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <tr *ngFor="let person of people">
        <td><button (click)="delete($index)" title="Delete">Delete</button></td>
        <td>person.Id</td>
        <td>person.Name</td>
    </tr>
</table>

JavaScript 代码:

// delete row
$scope.delete = function(index) {
    $scope.people.splice(index, 1);
};