Как мне динамически создать HTML-таблицу с угловым из многомерного массива? - PullRequest
Новая
       27

Как мне динамически создать HTML-таблицу с угловым из многомерного массива?

0 голосов
/ 29 мая 2019

Я пытаюсь динамически создать HTML-таблицу из Json, в которой есть массив. Проблема, с которой я сталкиваюсь, заключается в попытке создать <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

1 Ответ

0 голосов
/ 30 мая 2019

Несколько вещей, которые я сделал:

  1. имя массива - dArray, где были d-1, d-2, d-3 ... с оператором в качестве части имени; я переименовал их в d1, d2 и d3
  2. вы хотели отобразить только одно значение в столбце 'D-1', поэтому мы делаем *ngIf='i==0', чтобы убедиться, что мы оцениваем первую строку dArray для этого столбца таблицы 'D-1'
  3. мы должны были использовать вложенные if и else, чтобы печаталось только одно допустимое значение, иначе мы получим 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>

Вы можете проверить рабочий стек стека здесь

...