如何使用角度2 +

Question

我有以下动态获取的组项目列表是样本数据

groupItems = {
    "AllResult": [
        {
            "GrpId": 1,
            "GroupName": "DESKTOP",
        },
        {
            "GrpId": 2,
            "GroupName": "LAPTOPS",
        },
        {
            "GrpId": 3,
            "GroupName": "MOBILES",
        }
    ]
}

我正以按钮的形式显示这些按钮，所以当我点击此按钮时，我需要显示相关组的结果，如果我点击组名称笔记本电脑必须显示笔记本电脑的项目通过使用下面的groupid 是Items JSON的结果

itemsDetails = {
    "AllList": [
        {
            "ItemId":1
            "GrpId": 1,
            "ItemName": "DELL",
        },
        {
            "ItemId":1
            "GrpId": 1,
            "ItemName": "ACER",
        },
        {
            "ItemId":1
            "GrpId": 1,
            "ItemName": "LENOVO",
        },
        {
            "ItemId":1
            "GrpId": 2,
            "ItemName": "HP",
        },
        {
            "ItemId":1
            "GrpId": 2,
            "ItemName": "ASUS",
        },
        {
            "ItemId":1
            "GrpId": 3,
            "ItemName": "Motorolla",
        }        
    ]
}

html的

<div *ngFor="let data of groupItems" (click)=items(data.Grpid) >
 <p>{{data.GroupName}}</p>
</div>

.ts代码

items(Grpid){


}

现在我的问题是，如果我点击特定组，我怎样才能获得数据/项目列表？如果我点击DESKTOPS，则必须显示与桌面相关的所有项目

尝试解决方案：

Answer 1

无需为数组添加额外的键，您可以直接获得groupItems＆amp;的对象数组。 itemsDetails as：

groupItems = [
    {
        "GrpId": 1,
        "GroupName": "DESKTOP",
    }
    ...
]

itemsDetails = [
    {
        "ItemId":1
        "GrpId": 1,
        "ItemName": "DELL",
    }
    ...       
]

<强> HTML

<div *ngFor="let data of groupItems" (click)=getItems(data.Grpid) >
    <p>{{data.GroupName}}</p>
</div>

<强> TS

getItems(Grpid){
    let filteredData = this.itemsDetails.filter(item => item.GrpId == Grpid);
    console.log(filteredData);
}