splice在从数组中删除条目时正在创建空条目

Question

在我的Angular5应用程序中，当我试图从包含在selectedPersonArray中的peoples数组中删除条目时，使用splice关键字有时会在peoples数组中创建空条目。我完成的代码如下所示：

import { Component } from '@angular/core';
import { DragulaService } from 'ng2-dragula/ng2-dragula';
 @Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
 })
 export class AppComponent {


    selectedPersonArray = [];
    peoples = [
    {
      id: 7,
      firstName: 'Sobin 7',
      lastName: 'Thomas 7'
   }
  ];
 people = [
  {
  id: 1,
  firstName: 'First Name 1',
  lastName: 'Last Name 1'
},
{
  id: 2,
  firstName: 'First Name 2',
  lastName: 'Last Name 2'
},
{
  id: 3,
  firstName: 'First Name 3',
  lastName: 'Last Name 3'
},
{
  id: 4,
  firstName: 'First Name 4',
  lastName: 'Last Name 4'    
 }
];

  toggleItemInArr(arr, item) {
   const index = arr.indexOf(item);
   index === - 1 ? arr.push(item) : arr.splice(index, 1);
  }

 addThisPersonToArray(person: any, event) {
  if (!event.ctrlKey) {
    this.selectedPersonArray = [];
  }

  this.toggleItemInArr(this.selectedPersonArray, person);
 }

 isPersonSelected(person: any) {
   return (this.selectedPersonArray.indexOf(person) !== -1);
 }

constructor(private dragula: DragulaService) { 
  dragula.setOptions('second-bag', {
   copy: function (el, source) {
   return source.id === 'source';
  },

removeOnSpill: true,

copySortSource: false,
accepts: function(el, target, source, sibling) {
return target.id !== 'source';
}
});


}
ngOnInit() {
 this.dragula
  .out
  .subscribe(value => {

  for(let select of  this.selectedPersonArray){
    let i= 0;         
     for (let entry of this.peoples) {
         if(entry.id == select.id){               
           let index = this.people.indexOf(select.id);            
           if (this.peoples.length >0){
             this.peoples.splice(i, 1);
           }               
          }             
     i++;
    }         
  }
  console.log("on after loop   "+JSON.stringify( this.peoples));
  this.selectedPersonArray.length = 0; 

 });    
 } 
}

app.component.html

<table border=1 bgcolor="yellow">
  <tbody id ='source' [dragula]='"second-bag"' [dragulaModel]="people">
    <tr *ngFor="let person of people" >
      <td>{{person.id}}</td>
      <td>{{person.firstName}}</td>
      <td>{{person.lastName}}</td>
    </tr>
  </tbody>
</table>




 <table border=2>
  <tbody id ='dest' [dragula]='"second-bag"' [dragulaModel]="peoples">
    <tr *ngFor="let person of peoples" (click)="addThisPersonToArray(person, $event)" [class.active]="isPersonSelected(person)">
      <td>{{person.id}}</td>
      <td>{{person.firstName}}</td>
      <td>{{person.lastName}}</td>
    </tr>
  </tbody>
</table>

实际上，我想要的是从ng2-dragular second- but的'dest‘容器中删除多个使用null键选择的项，并且它正在工作，但它也创建了null条目

Answer 1

你能试试这个吗？

this.peoples
    .filter(people => !this.selectedPersonArray
        .find(selectdPeople => people.id === selectdPeople.id)
    );

Answer 2

我喜欢使用filter和find得到的答案。这是另一个使用循环的替代方法。

我做了一个jsfiddle，我怀疑你想要做什么。这是不是和你想要的差不多？

我更新了搜索，以便向后工作，这样拼接就不会改变数组中尚未搜索的部分。

jsfiddle可以在这里找到：https://jsfiddle.net/vboughner/wfeunv2j/

this.selectedPersonArray = [
  {
    "id": "hello1",
    "name": "something1"
  },
];

this.peoples = [
  {
    "id": "hello1",
    "name": "something1"
  },
  {
    "id": "hello2",
    "name": "something2"
  },
  {
    "id": "hello3",
    "name": "something3"
  },
];
console.log(this.selectedPersonArray);
console.log(this.peoples);

for (let select of this.selectedPersonArray) {
  for (let i = this.peoples.length - 1; i >= 0; i--) {
    if (select.id == this.peoples[i].id) {
      this.peoples.splice(i, 1);
    }
  }
}

console.log("on after loop   " + JSON.stringify( this.peoples));
this.selectedPersonArray.length = 0; 

输出如下所示：

on after loop   [{"id":"hello2","name":"something2"},{"id":"hello3","name":"something3"}]