从带有angular6的对象中删除子对象

Question

有一个API可以返回这样的数据

[
  {
    "id": 9,
    "name": "Past Menu",
    "serveDate": "2019-05-08 00:00:00",
    "meals": [
      {
        "id": 27,
        "name": "6",
        "description": "6",
        "image": "",
        "mealType": "BREAKFAST",
        "unitPrice": 6,
        "status": "ENABLED"
      },
      {
        "id": 28,
        "name": "7",
        "description": "7",
        "image": "",
        "mealType": "BREAKFAST",
        "unitPrice": 7,
        "status": "ENABLED"
      },
      {
        "id": 30,
        "name": "9",
        "description": "9",
        "image": "",
        "mealType": "BREAKFAST",
        "unitPrice": 9,
        "status": "ENABLED"
      }
    ]
  },
  {
    "id": 8,
    "name": "Bomb Menu",
    "serveDate": "2019-05-10 00:00:00",
    "meals": [
      {
        "id": 28,
        "name": "7",
        "description": "7",
        "image": "",
        "mealType": "BREAKFAST",
        "unitPrice": 7,
        "status": "ENABLED"
      },
      {
        "id": 30,
        "name": "9",
        "description": "9",
        "image": "",
        "mealType": "BREAKFAST",
        "unitPrice": 9,
        "status": "ENABLED"
      },
      {
        "id": 31,
        "name": "10",
        "description": "10",
        "image": "",
        "mealType": "BREAKFAST",
        "unitPrice": 10,
        "status": "ENABLED"
      }
    ]
  }
]

服务

getMenus() {
  this.dataServices.menuList(this.pagedData)
  .subscribe(
    response => {
      if (response && response.code === HttpStatus.OK) {
        this.dataList = response.data;
      }
    },

  );
}

我当前正在尝试做的是能够从服务器返回的数据中删除子对象，因此我具有此功能

deleteItem(item) {
  for (let r = 0; r < this.dataList.meals.length; r++) {
    if (this.dataList.meals[r].id === item.id) {
    this.dataList.meals.splice(r, 1);
    }
  }
}

当我调用函数时出现此错误  ERROR TypeError: Cannot read property 'length' of undefined

Answer 1

您需要浏览所有“菜单”项，然后按照下面的代码过滤“餐”项。

const dataList = [
  {
    "id": 9,
    "name": "Past Menu",
    "serveDate": "2019-05-08 00:00:00",
    "meals": [
      {
        "id": 27,
        "name": "6",
        "description": "6",
        "image": "",
        "mealType": "BREAKFAST",
        "unitPrice": 6,
        "status": "ENABLED"
      },
      {
        "id": 28,
        "name": "7",
        "description": "7",
        "image": "",
        "mealType": "BREAKFAST",
        "unitPrice": 7,
        "status": "ENABLED"
      },
      {
        "id": 30,
        "name": "9",
        "description": "9",
        "image": "",
        "mealType": "BREAKFAST",
        "unitPrice": 9,
        "status": "ENABLED"
      }
    ]
  },
  {
    "id": 8,
    "name": "Bomb Menu",
    "serveDate": "2019-05-10 00:00:00",
    "meals": [
      {
        "id": 28,
        "name": "7",
        "description": "7",
        "image": "",
        "mealType": "BREAKFAST",
        "unitPrice": 7,
        "status": "ENABLED"
      },
      {
        "id": 30,
        "name": "9",
        "description": "9",
        "image": "",
        "mealType": "BREAKFAST",
        "unitPrice": 9,
        "status": "ENABLED"
      },
      {
        "id": 31,
        "name": "10",
        "description": "10",
        "image": "",
        "mealType": "BREAKFAST",
        "unitPrice": 10,
        "status": "ENABLED"
      }
    ]
  }
];

function deleteItem(item) {
  return dataList.map(menuItem => {
    const newItem = {...menuItem};
    newItem.meals = newItem.meals.filter(meal => meal.id !== item.id);
    return newItem;
  });
}

const newList = deleteItem({id:30});
console.log(JSON.stringify(newList,0,2));

return dataList.map(

遍历menu个项目的外部列表，并允许返回修改后的值。

newItem.meals = newItem.meals.filter(meal => meal.id !== item.id);

遍历所有meals项，如果您选择的ID与餐ID相匹配（在这种情况下为30），则返回false。如果返回的值为true，则meals项目将包含在过滤器中。否则将被排除。

Answer 2

您应该遍历this.dataList：

deleteItem(item){
    for (let i = 0; i < this.dataList.length; i++) {
        for (let r = 0; r < element.meals.length; r++) {
            if (this.dataList[i].element.meals[r].id === item.id) {
                this.dataList[i].element.meals.splice(r, 1);
            }
        }
    }
}