时间戳

首页 > 解决方案 > 如何使用 Angular Material 在表格中呈现对象对象

angular - 如何使用 Angular Material 在表格中呈现对象对象

问题描述

我想展示数据 - 这是下面 Angular Mat Table 示例中的一个对象：

{
   "first": 15.0,
   "second": [{"id":1,"data_1":"foo","dat_2":"bar"}],
   "third": "2018-09-15T05:30",
   "fourth": ["ONE", "TWO"],
   "fifth": {"data_3":145,"id":2,"data_4":1600}
}

实际上我想在表格中显示它，在第一列会有“第一”，“第二”等键，在第二列会有一个值（这可能是一个字符串，数字数组或数组对象。

这里介绍了我实际拥有的内容： 我当前的进度- 在 table-basic-example.ts 中有两个元素： ELEMENT_DATA_NEW 显示正确，但是我想显示 NEW_DATA

注意：我使用角垫对话框打开对话框，该表将在其中显示。

标签： angulartypescriptangular-materialangular-material-table

解决方案

您需要将 NEW_DATA 转换为 dataSouce：

dataSource = Object.entries(NEW_DATA).map(o => {
    return { name: o[0], value: JSON.stringify(o[1]) };
});

https://stackblitz.com/edit/angular-table-content-of-object-onx5sm

推荐阅读