Angular 2 ng для одного элемента tr

Question

Значение cList:

code value1 value2
ABC  01     test1
DEF  02     test2
GHI  03     test3
JKL  04     test4
MNO  05     test5
PQR  06     test6
STU  07     test7
VWX  08     test8

у моего component.ts есть следующее. Arraylist. Первые 4 списка добавляются в cList1, а 5-8 - в cList4.

cList: CaseInventorySummaryCustomDTO[] = [];
cList1: CaseInventorySummaryCustomDTO[] = [];
cList2: CaseInventorySummaryCustomDTO[] = [];

this.cList = this.data.cList;
for (let i = 0; i <= 3; i++) {                  
    this.cList1.push(this.cList[i]);
}
for (let i = 4; i < this.cList.length; i++) { 
    this.cList2.push(this.cList[i]);
}

мой component.html выглядит следующим образом:

<table>
<thead colspan="12">
    Subject Specialities
</thead>
<tr *ngFor="let i of cList1; let j of cList2">
    <td style="width: 4em">
       {{i.code}}
    </td>
    <td style="width: 3em">
        {{i.value1}}
    </td>
    <td colspan="2">
        {{i.value2}}
    </td>
    <td style="width: 4em">
        {{j.code}}
    </td>
    <td style="width: 3em">
        {{j.value1}}
    </td>
    <td colspan="2">
        {{j.value2}}
    </td>
</tr>
</table>

Мой ожидаемый результат

    Subject Specialities
ABC 01  test1   MNO 05  test5
DEF 02  test2   PQR 06  test6
GHI 03  test4   STU 07  test7
JKL 04  test4   VWX 08  test8

Но что я вижу,

    Subject Specialities
MNO 05  test5   MNO 05  test5
PQR 06  test6   PQR 06  test6
STU 07  test7   STU 07  test7
VWX 08  test8   VWX 08  test8

2 ngFor не работает на одном тр? или я ошибаюсь в приведенном выше коде? Кто-нибудь может помочь.

Answer 1

Вы не можете сделать цикл из двух массивов в одном *ngFor. Вы можете использовать этот элемент для второго цикла.

Angular <ng-container>- это группирующий элемент, который не мешает стилям или макету, потому что Angular не помещает его в DOM.

<tr *ngFor="let i of cList1;">
  <ng-container *ngFor="let j of cList2">
    ...
  </ng-container>
</tr>

---

Решение вопроса

<tr *ngFor="let item of cList1; let i = index">
    <td style="width: 4em">
       {{i.code}}
    </td>
    <td style="width: 3em">
        {{i.value1}}
    </td>
    <td colspan="2">
        {{i.value2}}
    </td>
    <td style="width: 4em">
        {{cList2[i].code}}
    </td>
    <td style="width: 3em">
        {{cList2[i].value1}}
    </td>
    <td colspan="2">
        {{cList2[i].value2}}
    </td>
</tr>