각도 구성 요소 테이블의 각 루프에 중첩되는 위치는 어디입니까?

Question

각 루프에 대해 여러 테이블이 표시됩니다. 각 테이블 행 내에는 두 개의 항목이 연속으로 항목에 적용되는 각 루프에 대해 두 개가 추가로 있습니다.

각 루프에 대해 두 번째 항목을 어디에 둘지 확실하지 않습니다. 이 같은 것을 할 수 있습니다.

<div *ngFor="let table of tables">{{table}} 
    <table> 
    <tr *ngFor="let item of key">{{item.name}}</tr> 
    </table> 
</div> 

첫 번째 데이터 세트를 표시 할 수 있습니다. 그러나 내가 tr에 표시해야 할 속성 중 일부는 item 내의 배열 안에 중첩되어 있으므로 각각 하나씩 더 필요합니다.

처음에 다른 태그 (div/span으로 둘러싸인 tr, * ngFor에 열쇠 항목을 옮기고, 마지막 * ngFor를 tr에 추가)를 추가하려고 시도했지만 tbody/표 :

<div *ngFor="let table of tables">{{table}} 
    <table> 
    <div *ngFor="let item of key"> 
     <tr *ngFor="let subItem of item"> 
     <td>{{item.name}}</td> 
     <td>{{subItem.address}}</td> 
     </tr> 
    <div> 
    </table> 
</div> 

사용할 수있는 유효한 태그가 있습니까? 하나의 태그에 두 개의 * ngFor를 할 수 있습니까?

Answer 1

당신은 TD이 두 번째 경우에 적절한 마크 업이 데이터가 구축 된 방법에 따라 달라집니다

<tr *ngFor="let item of key"> 
    <td>{{item.name}}</td> 
    <td>{{item.otherAttr}}</td> 

    <td *ngFor="let subItem of item.someAttrThatIsAnArray"> 
    {{subItem}} 
    </td> 
</tr> 

같은

뭔가를 ngFor을 수행해야합니다.

Answer 2

각 루프의 마지막에 ng-container 태그를 사용할 수 있습니다. 따라서 코드는 다음과 같습니다.

<div *ngFor="let table of tables">{{table}} 
    <table> 
    <ng-container *ngFor="let item of key"> 
     <tr *ngFor="let subItem of item"> 
     <td>{{item.name}}</td> 
     <td>{{subItem.address}}</td> 
     </tr> 
    <ng-container> 
    </table> 
</div>