根据Angular 6中的类删除元素

Posted 2023-03-13

【中文标题】根据Angular 6中的类删除元素

【英文标题】：Remove element on basis of class in Angular 6

【发布时间】：2019-01-23 02:45:31

【问题描述】：

我有一个列表，在单击每个项目时，一个类会在该列表中切换。这是我的代码

My Code

我正在切换列表中的课程。当用户单击“添加”按钮时，我想从列表中删除未选择的元素。我已经完成了列表中的切换类，但是在基于 css 类删除项目时我遇到了问题。请帮忙。

【参考方案1】：

如果我完全理解您的需要，您想在单击“添加”按钮时删除未选中的项目， 然后将其添加到您的按钮中。

<button (click)="removeUnSelected()">ADD</button>

并将此函数添加到您的 app.ts 文件中

removeUnSelected() 
console.log(this.items[0].active);
// check if enything is selected first
let flag=0;
let i=0;
for(i=0;i<this.items.length;i++) 
  if(this.items[i].active) 
    flag=1;
    break; 
  

if(flag)
for(i=0;i<this.items.length;i++) 
  if(!this.items[i].active) 
    this.items.splice(i, 1); 
    i--; 
  

我已经尝试过了...如果在单击按钮时未选择这些项目，这将从数组中删除。

【讨论】：

感谢@maha 的工作，但问题是如果没有选择任何内容，所有内容都将被删除。

不客气..如果没有选择任何内容，您希望发生什么？

【参考方案2】：

试试这个：

DEMO

  deleteNotSelect() 
    let data = this.items.filter(data => data.active == true)
        if (data.length > 0) 
            this.items = data;
         
  

【讨论】：

感谢@UnluckyAj .. 工作，但问题是如果没有选择所有内容都将被删除

嗨@UnluckyAj 如果我想在后退按钮上添加已删除的项目，我应该怎么做。你能帮帮我吗。

如何获得原始数组。调用相同的方法。

我从 json 对象获取数组

在不同页面再次调用相同的json对象。

【参考方案3】：

使用 forEach 循环将项目的活动属性切换为 false：

  add() 
    this.items.forEach(function(v,i)
        v.active = false;
    )
  

demo