亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如果沒有子元素,則從列表中動態刪除項目

如果沒有子元素,則從列表中動態刪除項目

慕仙森 2022-11-27 16:21:34
我有 3 個數組列表如下: groups = [ { grpId: 1, grpName: "Vegetables" }, { grpId: 2, grpName: "Fruits" }, { grpId: 3, grpName: "Staples" }]; subGrp = [ { subGrpId: "V1", grpId: 1, subGrpName: "Carrot" }, { subGrpId: "F1", grpId: 2, subGrpName: "Apple" },            { subGrpId: "S1", grpId: 3, subGrpName: "Dal" }]; quantity = [ { quantityValue: "1kg", subGrpId: "V1" }, { quantityValue: "1kg", subGrpId: "S1" }];條件:如果沒有任何與“subGrp”數組相關的“數量”,那么我們需要從自定義列表中刪除整個條目。使用上面的數組列表,我正在嘗試構建一個自定義列表,如下所示:const grpSet = new Set(this.groups.map(i => ({ id: i.grpId, name: i.grpName }))); grpSet.forEach(g =>  this.groceryList.push({    grp: g["name"],    grpTypeList: this.subGrp.filter(el => {      if (el.grpId === g["id"] && this.quantity) {        el["quantities"] = this.quantity.filter(          v => v.subGrpId === el["subGrpId"]        );        if (el["quantities"].length > 0) {          return el;        }      }    })  }));// above logic will lead us to below custom list. 由此,我需要刪除 Fruits 條目,因為 grpTypeList 是空的。但是我的邏輯不允許我這樣做。[{    "grp": "Vegetables",    "grpTypeList": [{        "subGrpId": "V1",        "grpId": 1,        "subGrpName": "Carrot",        "quantities": [{                "quantityValue": "1kg",                "subGrpId": "V1"            },            {                "quantityValue": "2kg",                "subGrpId": "V1"            }        ]    }]},// remove this complete object as grpTypeList is empty{    "grp": "Fruits",    "grpTypeList": [    ]}, {    "grp": "Staples",    "grpTypeList": [{        "subGrpId": "S1",        "grpId": 3,        "subGrpName": "Dal",        "quantities": [{            "quantityValue": "1kg",            "subGrpId": "S1"        }]    }]} ]使用上面的列表,我正在繪制我的 html 以顯示如下圖:
查看完整描述

1 回答

?
慕標5832272

TA貢獻1966條經驗 獲得超4個贊

您只需要注意一些小改動,請使用以下幾行更新您的代碼:


import { Component, OnInit } from "@angular/core";


@Component({

  selector: "my-app",

  templateUrl: "./app.component.html",

  styleUrls: ["./app.component.css"]

})

export class AppComponent implements OnInit {

  groceryList = [];

  groups = [

    { grpId: 1, grpName: "Vegetables" },

    { grpId: 2, grpName: "Fruits" },

    { grpId: 3, grpName: "Staples" }

  ];

  subGrp = [

    { subGrpId: "V1", grpId: 1, subGrpName: "Carrot" },

    { subGrpId: "F1", grpId: 2, subGrpName: "Apple" },

    { subGrpId: "S1", grpId: 3, subGrpName: "Dal" }

  ];

  quantity = [

    { quantityValue: "1kg", subGrpId: "V1" },

    { quantityValue: "2kg", subGrpId: "V1" },

    { quantityValue: "1kg", subGrpId: "S1" }

  ];


  ngOnInit() {

    this.groceryList = [];

    const grpSet = new Set(

      this.groups.map(i => ({ id: i.grpId, name: i.grpName }))

    );


    grpSet.forEach(g =>{

      let element:any[];

      element= this.subGrp.filter(el => {

          if (el.grpId === g["id"] && this.quantity) {

            el["quantities"] = this.quantity.filter(

              v => v.subGrpId === el["subGrpId"]

            );

            if (el["quantities"].length > 0) {

              return el;

            }

          }

        })

        if(element && element.length){

        this.groceryList.push({

          grp:g["name"],

          grpTypeList:element

        })

        }

    }

    );

    console.log(JSON.stringify(this.groceryList));

  }

}


查看完整回答
反對 回復 2022-11-27
  • 1 回答
  • 0 關注
  • 115 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號