Angular，如何在单击按钮时隐藏表格行 [英] Angular , How to hide a table row on click of a button

问题描述

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

I have a table in which each row has a delete button. on click of the button the data gets deleted. However to verify that record is deleted, I have to refresh the page. I want to hide the current row on click of the delete button. Here is my code.

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

and in my component.ts On delete I change the value of hideRow

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

hideRow是一个布尔变量，默认值为false.问题是，当我单击删除时，所有行都会被隐藏(当然).我该如何仅参考当前行?

hideRow is a boolean variable with default value of false. The problem is that when I click on delete, all the rows become hidden(of course). How can I refer just to the current row?

推荐答案

根据您提供的代码，我将删除此部分*ngIf="!hideRow"并将其添加到您的组件中

Based from the code you provided, I would remove this part *ngIf="!hideRow" and add this to your component

delete(id) {  
    this.personService.delete(id).subscribe(p=> {
        console.log(p);
        this.people.filter( person => person.id !== id)
        // or you can use splice by using the index
    });
}

现在，您的html更简单，无需使用*ngIf

Now your html is simpler and no need to use *ngIf

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

这篇关于Angular，如何在单击按钮时隐藏表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！