打字稿 - 无法拼接数组

Question

我试图在未选中复选框时删除数组的一部分（如果复选框值与数组项中的值匹配）。当用户单击复选框时创建的数组工作正常，但是当未选中复选框时，我尝试删除/拼接的数组对象现在是字符串对象，因此无法拼接。我的困惑是关于为什么数组在第二次循环后“变成”字符串对象。我正在努力的主要代码块开始于：onCheckboxChange(option, event)Stackblitz 在这里：https ://stackblitz.com/edit/angular-match-groceries-sweetsimport { 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)           }         })         })      }     }}

Answer 1

请找到解决问题的更简单的方法

 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