Question

我对角度/打字稿非常陌生。我完成了api调用，邮递员返回了此数据，现在我需要以某种方式在Typescript数据结构中表示此数据，以便允许我迭代这些值。数据表示这些类。

public class MainStructure
    {
        public List<ClientStructure> ClientList = new List<ClientStructure>();//Clientlist
    }

    public class ClientStructure
    {
        public List<TreeUser> Userlist = new List<TreeUser>();//users under  client
        public List<AdAccountStructure> AdAccountList = new List<AdAccountStructure>();//ad account under client
    }

    public class AdAccountStructure
    {
        public TreeAdAccount AdAccount = new TreeAdAccount();
        public TreeUser AdAccountUser = new TreeUser();
    }

这是示例结果。

"10X Invest 343": {
        "ClientList": [
            {
                "Userlist": [
                    {
                        "UserId": 732,
                        "UserGUID": "d84a267c-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
                        "ClientId": 343,
                        "Name": "Declan ",
                        "Surname": "Hollywood"
                    },
                    {
                        "UserId": 733,
                        "UserGUID": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
                        "ClientId": 343,
                        "Name": "Jos",
                        "Surname": "Hilles "
                    },
                    {
                        "UserId": 744,
                        "UserGUID": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
                        "ClientId": 343,
                        "Name": "Sam ",
                        "Surname": "Etang"
                    },
                    {
                        "UserId": 745,
                        "UserGUID": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
                        "ClientId": 343,
                        "Name": "Lee",
                        "Surname": "Lip"
                    },
                    {
                        "UserId": 752,
                        "UserGUID": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
                        "ClientId": 343,
                        "Name": "Cathe",
                        "Surname": "Nei"
                    },
                    {
                        "UserId": 819,
                        "UserGUID": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
                        "ClientId": 343,
                        "Name": "Christ",
                        "Surname": "Under"
                    }
                ],
                "AdAccountList": [
                    {
                        "AdAccount": {
                            "AdAccountId": 0,
                            "SocialAccountId": null,
                            "Name": null
                        },
                        "AdAccountUser": {
                            "UserId": 540,
                            "UserGUID": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
                            "ClientId": 2,
                            "Name": "Van",
                            "Surname": "Clar"
                        }
                    },
                    {
                        "AdAccount": {
                            "AdAccountId": 882,
                            "SocialAccountId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
                            "Name": "10X Invest"
                        },
                        "AdAccountUser": {
                            "UserId": 7,
                            "UserGUID": ""xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
                            "ClientId": 2,
                            "Name": "Geres",
                            "Surname": "Gov"
                        }
                    }
                ]
            }
        ]
    }

所以我需要将这些数据保存在打字稿中，以便能够将其传递给前端组件

Answer 1

创建几个代表您的数据结构的打字稿接口。并从您的角度http调用返回该接口。

interface MyDataStructure {
    ...
}

this.http.get<MyDataStructure>('/api/something');

最困难的部分是构造接口以匹配后端响应。

我建议在这里阅读更多有关它们的信息 https://www.typescriptlang.org/docs/handbook/interfaces.html

在Typescript中定义数据结构以存储此JSON数据

1 个答案: