angular - JSON到Angular中的动态HTML表

Question

如何创建具有列和行的动态 Html 表？下面是 JSON 数据，我想使用这些数据创建 HTML 表：

{
    "columnNames": [
        "Applicant ID(id|Optional)",
        "Roll No",
        "Applicant Name",
        "Password",
        "CA ID",
        "Shift Name",
        "Shift Date",
        "Start Time",
        "End Time"
    ],
    "rows": [
        [
            "122",
            "18",
            "Amit",
            "12345",
            "42",
            "testShift2",
            "2019-12-31",
            "13:00",
            "16:00"
        ]
    ]
}

标签： angular

Answer 1

假设您的 json 存储在data,

试试这样：

<table>
    <tr>
        <th *ngFor="let item of data.columnNames">{{item}}</th>
    </tr>
    <tr *ngFor="let rowData of data.rows">
        <td *ngFor="let el of rowData">{{el}}</td>
    </tr>
</table>