当未选中复选框时(如果复选框值与数组项中的值匹配),我尝试删除数组的一部分。当用户单击复选框时创建的数组工作正常,但是当取消选中复选框时,我尝试删除/拼接的数组对象现在是一个字符串对象,因此无法拼接。我的困惑在于为什么数组在第二次循环后“变成”字符串对象。
我正在努力处理的主要代码块始于:onCheckboxChange(option, event)
Stackblitz 在这里:https://stackblitz.com/edit/angular-match-groceries-sweets
import { Component } from '@angular/core';
// import * as d3 from "d3";
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
grocery_list: any;
treats: [];
box: any;
allTreats: any;
noDupes: any;
selectedAll: any;
isChecked: boolean;
showTreats: any;
checkedList: string[] = [];
constructor(){}
ngOnInit(){
this.getTreats();
}
getTreats(){
this.grocery_list = [
{"fruit": "apple", "veggie": "lettuce", "sweets": ["cookies", "cake"]},
{"fruit": "orange", "veggie": "asparagus", "sweets": ["cookies", "ice cream"]},
{"fruit": "apple", "veggie": "carrots", "sweets": ["No Data", "cake"]},
{"fruit": "apple", "veggie": "lettuce", "sweets": ["cookies", "No Data"]},
];
this.treats = this.grocery_list.map(x => x.sweets);
this.box = [].concat.apply([],this.treats);
this.noDupes = Array.from(new Set(this.box));
this.allTreats = Array.from(this.box)
}
// this is where the check/uncheck logic starts
onCheckboxChange(option, event) {
let eChecked = event.target.checked;
if(eChecked) {
this.grocery_list.forEach(x => {
x.sweets.forEach(y => {
if (y === option){
this.checkedList.push(x);
}
});
});
// this is the part that isn't working
} else {
this.checkedList.forEach(c, i => {
c.sweets.forEach(k => {
// if 'sweet' name = option, remove its array object
if (k === option) {
this.checkedList.splice(i, this.checkedList.length)
}
})
})
}
}
}
最佳答案
请找到更简单的方法来解决问题
onCheckboxChange(option, event) {
let checkedState = event.target.checked;
if(checkedState === true)
this.checkedList = this.checkedList.concat(this.grocery_list.filter(item => item.sweets.includes(option)))
else
this.checkedList = this.checkedList.filter(item => !item.sweets.includes(option));
// the above code checks for items which contains sweets array with selected option and keeps only those which doesn't
}
更新 更改以下类型
checkedList: any[] = []; // or create an interface based on your grocery_list
关于javascript - Typescript - 无法拼接数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58274205/