在我的Angular5应用程序中,当我尝试使用splice关键字从selectedPersonArray中包含的peoples数组中删除条目时,偶尔会在peoples数组中创建null条目。我所做的代码如下:
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-bag的'dest'容器中的控制键选择的多个项目。它正在工作,但它也创建了空条目
答案 0 :(得分:1)
你能试试吗?
this.peoples
.filter(people => !this.selectedPersonArray
.find(selectdPeople => people.id === selectdPeople.id)
);
答案 1 :(得分:0)
我喜欢使用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"}]