동일한 tr 요소의 각도 2ngFor

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에 foll이 있습니다. arraylist. 1st 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

2ngFor는 동일한 tr에서 작동하지 않습니까? 또는 위의 코드가 잘못 되었습니까? 누군가 도와주세요.

Answer 1

하나의 루프 2 배열을 수행 할 수 없습니다 *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>