Angular，通过ID从HTML表格中删除一行。

20 浏览
0 Comments

Angular，通过ID从HTML表格中删除一行。

这一次我需要关于如何在点击删除按钮时通过行ID在HTML表中删除一行的帮助。该表的数据源来自一个单独的JSON文件。

表格看起来像这样：图片链接

ID Name Email Age Phone
{{ d.id }} {{ d.name }} {{ d.email }} {{ d.age }} {{ d.phone }}

 

如果需要更多代码片段，请告诉我。谢谢。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

你可以将这段代码添加到你的HTML文件中

            

              

                ID
                Name
                Email
                Age
                Phone
              

                
 
                    {{ d.id }}
                    {{ d.name }}
                    {{ d.email }}
                    {{ d.age }}
                    {{ d.phone }}

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

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

0
0 Comments 

        

          

            ID
            Name
            Email
            Age
            Phone
          

            
 
                {{ d.id }}
                {{ d.name }}
                {{ d.email }}
                {{ d.age }}
                {{ d.phone }}

Typescript

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

注意：此处翻译结果中没有包含html标签

、、，只翻译了标签中的文本内容。

0