Angular，按ID从html表中删除一行答案

【问题标题】：Angular, delete a row from html-table by IDAngular，按ID从html表中删除一行
【发布时间】：2018-04-12 08:05:35
【问题描述】：

这次我需要有关如何在单击删除按钮时根据 html-table 中的行 ID 删除行的帮助。表数据源来自一个单独的 Json 文件。

表格如下所示： Image Link

<div class="container">
        <table border=1 class="table">
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Age</th>
            <th>Phone</th>
          </tr>
            <tr *ngFor="let d of data | async" [attr.id]="d.id"> <!--each row id == id-->
                <td>{{ d.id }}</td>
                <td>{{ d.name }}</td>
                <td>{{ d.email }}</td>
                <td>{{ d.age }}</td>
                <td>{{ d.phone }}</td>
                <button id="remove">DELETE ROW</button>
            </tr>
        </table> 
    </div>

如果需要更多的 sn-ps，请告诉我。谢谢。

【问题讨论】：

告诉我们你做了什么，而不是要求我们为你做。

标签： html angular html-table

【解决方案1】：

我会在按钮上添加一个（点击）事件并传递“d”作为参数。然后在点击调用的函数中，我会拼接“删除”的项目。

添加（点击）事件的代码：

<button id="remove" (click)="functionToDeleteItem(d)">DELETE ROW</button>

拼接数组并移除已删除项的示例：

stackoverflow past example - How do I remove an array item in TypeScript?

另外，除非您将按钮中的 id="remove" 用于 css 等其他用途，否则我会删除它，因为它不需要。

【讨论】：

【解决方案2】：

您可以在 HTML 文件中添加此代码

<div class="container">
            <table border=1 class="table">
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Age</th>
                <th>Phone</th>
              </tr>
                <tr *ngFor="let d of data | async" [attr.id]="d.id"> <!--each row id == id-->
                    <td>{{ d.id }}</td>
                    <td>{{ d.name }}</td>
                    <td>{{ d.email }}</td>
                    <td>{{ d.age }}</td>
                    <td>{{ d.phone }}</td>
                    <button id="remove" (click)="deleteRow(d.id)">DELETE ROW</button>
                </tr>
            </table> 
        </div>

并将这段代码添加到你的组件文件中

deleteRow(id){
        for(let i = 0; i < this.data.length; ++i){
            if (this.data[i].id === id) {
                this.data.splice(i,1);
            }
        }
    }

【讨论】：

【解决方案3】：

<div class="container">
        <table border=1 class="table">
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Age</th>
            <th>Phone</th>
          </tr>
            <tr *ngFor="let d of data | async" [attr.id]="d.id"> <!--each row id == id-->
                <td>{{ d.id }}</td>
                <td>{{ d.name }}</td>
                <td>{{ d.email }}</td>
                <td>{{ d.age }}</td>
                <td>{{ d.phone }}</td>
                <button id="remove" (click)="deleteRow(d)">DELETE ROW</button>
            </tr>
        </table> 
    </div>

打字稿

deleteRow(d){
    const index = this.data.indexOf(d);
    this.data.splice(index, 1);
}

【讨论】：