ngFor 2 행을 작성하십시오.

Question

사용 Angular 2 ngFor 테이블을 작성 중입니다.

내 문제 my data array가

<tbody> 
    <tr *ngFor="let element of data; let i = index"> 
     <th>...<th> 
     ... 
     <td>...<td> 
    </tr> 
</tbody> 

문제는 tbody이다 (두 번째 행보다 데이터 접을 다양한 필드를 이용하여) 각각의 요소는 표 2 개 연속 행을 생성한다 elements되도록 포함되어있다 <tr> 옆의 속성을 허용하지 않습니다.

나는 약간 다른 구문이 존재

<tbody> 
    <template *ngFor="let element of data; let i = index"> 
     <tr>...</tr> //row 1 
     <tr>...</tr> //row 2 
    </template> 
</tbody> 

Answer 1

처럼 뭔가를 찾고 있어요 :

<template ngFor let-element [ngForOf]="data" let-i="index"> 
    <tr>...</tr> //row 1 
    <tr>...</tr> //row 2 
</template> 

또는

<ng-container *ngFor="let element of data let i=index"> 
    <tr>...</tr> //row 1 
    <tr>...</tr> //row 2 
</ng-container> 

업데이트> = 4.0.0 <template>에 대한 가로 변경되었습니다.3210

<ng-template ngFor let-element [ngForOf]="data" let-i="index"> 
    <tr>...</tr> //row 1 
    <tr>...</tr> //row 2 
</ng-template> 

Answer 2

나는 똑같은 문제에 직면했고 어떤 좋은 해결책도 찾지 못했습니다. 그러나 깊은 reseach 후에 나는이 용기를 발견하고 아주 잘 작동했다. U는

https://plnkr.co/edit/F8ohXKLHvvbHXAqGESQN?p=preview

<ng-container *ngFor="let obj of posts"> 
     <tr> 
      <td> 
       <button (click)="openCloseRow(obj.id)"> 
        <span *ngIf="rowSelected!=obj.id; else close">Open</span> 
         <ng-template #close> 
         <span>Close</span> 
         </ng-template> 
       </button> 
      </td> 
      <td>{{obj.date}}</td> 
      <td> 
       {{obj.subject}} 
      </td> 
      <td>{{obj.numComents}}</td> 
     </tr> 
     <tr *ngIf="rowSelected==obj.id"> 
      <td></td> 
      <td colspan="4"> 
       <table class="table table-striped"> 
        <thead> 
         <tr>         
          <th style="width:15%;">Comment</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr *ngFor="let q of obj.comments">         
          <td style="width:15%;">{{q}}</td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
     </ng-container> 

Answer 3

<table> 
     <tr> 
      <th>ID#</th> 
      <th>Name</th> 
      <th>Grade</th> 
      <th>Power</th> 
     </tr> 
     <tr *ngFor="let object_name of object_array"> 
      <td>{{object_name.id}}</td> 
      <td>{{object_name.name}}</td> 
      <td>{{object_name.grade}}</td> 
      <td>{{object_name.power}}</td> 
     </tr> 
</table>