使用 angular6 在表中填充 JSON 内容答案

【问题标题】：Populate JSON content in table using angular6使用 angular6 在表中填充 JSON 内容
【发布时间】：2019-01-05 15:53:39
【问题描述】：

我有 JSON 通过动态填充表头和正文来构造表。谁能建议问题出在 JSON 或表迭代中。

JSON：

this.columns = ["role1", "role2"];
this.permission = [
    {
      "role1": [{ "name": "master" }],
      "master": [ { "name": "sub1", "read" : true, "Write" : true }, 
        { "name": "sub2",  "read" : true, "Write" : true  } ]
    },
    {
      "role2": [{ "name": "master" }, { "name": "support" }],
      "master": [{ "name": "sub1", "read" : true, "Write" : false  }, 
                  { "name": "sub2",  "read" : true, "Write" : false  }],
      "support": [{ "name": "sub3",  "read" : true,  "Write" : true  
                  }]
    }
  ]

HTML：

<table border="1">
      <tr>
        <th rowspan="2"> Modules </th>
        <th colspan="2" *ngFor="let col of columns">
          {{col}}
        </th>
      </tr>
      <tr>
        <ng-container *ngFor="let char of permission; let first=first">
          <td> read</td>
          <td> write</td>
        </ng-container>
      </tr>
      <tr *ngFor="let char of permission">
        <td *ngFor="let col of columns">
          {{char[col]}}
        </td>
      </tr>
    </table>

输出：

【问题讨论】：

你能提供HTML吗？

标签： html angular typescript html-table angular6

【解决方案1】：

您的 json 中有很多错误。您可以使用JSON lint 进行验证（尽管 JSON 会要求您将键放在双引号中，而 typescript 不需要）

再试一次permissions：

this.permission =
  [ {
      role1: [{
        master: { sub1: { read: true, write: true },
                  sub2: { read: true, write: true } },
        support: { sub3: { read: true, write: false } },
        admin: { sub4: { read: false, write: false } }
      }],
      role2: [{
        master: { sub1: { read: true, write: false },
                  sub2: { read: true, write: false } },
        support: { sub3: { read: true, write: true } },
        admin: { sub4: { read: false, write: false } }
      }],
      role3: [{
        master: { sub1: { read: true, write: true },
                  sub2: { read: true, write: true } },
        admin: { sub4: { read: true, write: true } }
      }]
    },
    {
      role1: [{ 
        master: {
          sub1: { read: true, write: true },
          sub2: { read: true, write: true }
        },
        support: {
          sub3: { read: true, write: false }
        },
        admin: {
          sub4: { read: false, write: false }
        }
      }],
      role2: [{
        master: {
          sub1: { read: true, write: false },
          sub2: { read: true, write: false }
        },
        support: {
          sub3: { read: true, write: true }
        },
        admin: {
          sub4: { read: false, write: false }
        }
      }],
      role3: [{
        master: {
          sub1: { read: true, write: true },
          sub2: { read: true, write: true }
        },
        admin: {
          sub4: { read: true, write: true }
        }
      }]
    }
  ];

【讨论】：

感谢 JSON lint ，让我试试这个。
@NithyaNeela 是诸如 role1、master、sub1 等变量的值，或者它们可以是变量吗？如果值是静态的，你可以简化很多
不，它不是静态的。我想现在我构建了 json。
我将 json 更新为键值对。你能建议带来预期的表格结果是否有效
您有一个非常复杂的表，其中包含许多嵌套对象和值。我正在尝试复制它，但它有很多标记

【解决方案2】：

如果它返回一个对象，你可以这样做

{{char[col] | json}}

查看对象中的内容。

【讨论】：