如何从多维数组动态创建具有角的html表？

Question

我正在尝试从Json动态创建包含一个数组的html表。我遇到的问题是在尝试从子数组创建<td>s时。下面是我想要完成的事情的一个例子。

我应该使用<ng-container *ngFor="let m of l.dArray">吗？

 myArray = [   {
        "a": "01",
        "b": "01",
        "c": "03",
        "dArray": [
            {
                "d-1": 1,
                "d-2": 2,
                "d-3": "string1"
            },
            {
                "d-1": 2,
                "d-2": 1,
                "d-3": "string2"
            },
            {
                "d-1": 3,
                "d-2": 4,
                "d-3": "string3"
            }
        ]
    }
]

模板：

<table>
<thead>
    <tr><th>A</th></tr>
    <tr><th>B</th></tr>
    <tr><th>C</th></tr>
    <tr><th>D-1</th></tr>
    <tr><th>D-2</th></tr>
    <tr><th>D-3</th></tr>
</thead>
<tbody>
    <tr *ngFor="let l of myArray">
        <td>{{l.a}}</td>
        <td>{{l.b}}</td>
        <td>{{l.c}}</td>
        <ng-container *ngFor="let m of l.dArray">
            <td>
                <div *ngIf="m.d-1 === 1; else my1Else">
                            {{ m.d-3 }}%
                          </div>
                          <ng-template #my1Else>
                            N/A
                          </ng-template>
            </td>
            <td>
                <div *ngIf="m.d-1 === 2; else my2Else">
                            {{ m.d-3 }}%
                          </div>
                          <ng-template #my2Else>
                            N/A
                          </ng-template>
            </td>
            <td>
                <div *ngIf="m.d-1 === 1; else my3Else">
                            {{ m.d-3 }}%
                          </div>
                          <ng-template #my3Else>
                            N/A
                          </ng-template>
            </td>
        </ng-container>
    </tr>
</tbody>
</table>

预期成果：

----------------------------
A  | B | C  | D-1         | D-2     | D-3
01 | 01| 03 | string1     | string2 | string3


actual outcome:
----------------------------
A  | B | C  

Answer 1

我做了几件事：

1. 数组的名称是dArray为'd-1'，'d-2'，‘d-3’.其中有一个操作符作为名称的一部分；我将它们重命名为d1、d2 & d3
2. 您希望只显示‘D1’列中的一个值，因此我们执行一个*ngIf='i==0'以确保计算此表列‘D1’的dArray的第一行
3. 我们必须使用嵌套的if和nested，以便只打印一个有效值，否则我们得到一个N/A。

相关的HTML

<table>
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D-1</th>
            <th>D-2</th>
            <th>D-3</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let l of myArray">
            <td>{{l.a}}</td>
            <td>{{l.b}}</td>
            <td>{{l.c}}</td>
            <ng-container *ngFor="let m of l.dArray; let i=index">
                <td *ngIf='i===0'>
                    <div *ngIf="m.d1 === 1; else my1Else1">
                        {{ m.d3 }}%
                    </div>
                    <ng-template #my1Else1>
                        <div *ngIf="m.d1 === 2; else my2Else2">
                            {{ m.d3 }}%
                        </div>
                        <ng-template #my2Else2>
                            <div *ngIf="m.d1 === 3; else my3Else3">
                                {{ m.d3 }}%
                            </div>
                            <ng-template #my3Else3>
                                N/A
                            </ng-template>
                        </ng-template>
                    </ng-template>
                </td>

                <td *ngIf='i===1'>
                    <div *ngIf="m.d1 === 1; else my1Else1">
                        {{ m.d3 }}%
                    </div>
                    <ng-template #my1Else1>
                        <div *ngIf="m.d1 === 2; else my2Else2">
                            {{ m.d3 }}%
                        </div>
                        <ng-template #my2Else2>
                            <div *ngIf="m.d1 === 3; else my3Else3">
                                {{ m.d3 }}%
                            </div>
                            <ng-template #my3Else3>
                                N/A
                            </ng-template>
                        </ng-template>
                    </ng-template>
                </td>

                <td *ngIf='i===2'>
                    <div *ngIf="m.d1 === 1; else my1Else1">
                        {{ m.d3 }}%
                    </div>
                    <ng-template #my1Else1>
                        <div *ngIf="m.d1 === 2; else my2Else2">
                            {{ m.d3 }}%
                        </div>
                        <ng-template #my2Else2>
                            <div *ngIf="m.d1 === 3; else my3Else3">
                                {{ m.d3 }}%
                            </div>
                            <ng-template #my3Else3>
                                N/A
                            </ng-template>
                        </ng-template>
                    </ng-template>
                </td>

            </ng-container>
        </tr>
    </tbody>
</table>

你可以检查这里的工作堆栈闪电战