打字稿 - 无法拼接数组

Question

我试图在未选中复选框时删除数组的一部分（如果复选框值与数组项中的值匹配）。当用户单击复选框时创建的数组工作正常，但是当未选中复选框时，我尝试删除/拼接的数组对象现在是字符串对象，因此无法拼接。我的困惑是关于为什么数组在第二次循环后“变成”字符串对象。

我正在努力的主要代码块开始于：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)

           }

         })

         }) 

     }

     }

}

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