Question

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

我正在苦苦挣扎的主要代码块始于： 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

打字稿-无法拼接数组

1 个答案: