如何基于JSON数据在Angular Material Table中动态生成列（含固定列）

DevOps 小满

2026-7-30

Angular Material Table动态列生成问题

已在Angular Material Table中设置start Date、End Date两个固定列，需要根据服务器返回的响应生成动态表格——后端返回的details数组大小不固定，有时包含2列，有时包含3列甚至更多。尝试过多个Angular Material动态列示例，但均未成功。

当前JSON响应示例

{
    "cars": [
        {
            "startDate": "01/11/2020",
            "endDate": "03/03/2021",
            "details": [
                {
                    "nameofThecar": "Dodge",
                    "color": "Silver",
                    "type": "Sedan"
                },
                {
                    "nameofThecar": "Nissan",
                    "color": "White",
                    "type": "micro"
                },
                {
                    "nameofThecar": "Kia",
                    "color": "blue",
                    "type": "supercar"
                }
            ]
        },
        {
            "startDate": "05/01/2020",
            "endDate": "12/05/2021",
            "details": [
                {
                    "nameofThecar": "Dodge",
                    "color": "gold",
                    "type": "SUV"
                },
                {
                    "nameofThecar": "Nissan",
                    "color": "blue",
                    "type": "MPV"
                },
                {
                    "nameofThecar": "Kia",
                    "color": "silver",
                    "type": "wagon"
                }
            ]
        }
    ]
}