ng-repeat в угловом 2

Question

Нужно отобразить текстовую область для отображения деталей, после нажатия кнопки сведений.

Это дает результат, похожий на этот table structure

 <table> 
     <th>ID</th> 
     <th>Title</th> 
     <tr *ngFor = "let row of indexes"> 
     <td *ngFor = "let id of row>{{id}}</td> 
     <td><button (click)="showDetails()">DETAILS</td> 
     </tr> 
     </table> 

<tr *ngIf="isClicked"><td>{{id.details}}</td></tr> ---> Это должно отображаться следующим к строке, где нажата кнопка.

В угловом 1.x мы можем достичь этого, используя ng-repeat-start/ng-repeat-end. В угловом 2 у меня есть ключ включения </template ngFor let-row [ngForOf]="indexes"> Но не знаю, где это включить. Пожалуйста, предложите.

Answer 1

Если я правильно понимаю вашу проблему, вы хотите вставить две таблицы-строки для каждого из ваших indexes.

Так что если у вас есть что-то подобное в вашем классе компонентов:

rows: any[] = [ 
    { detailsVisible: false }, 
    { detailsVisible: false }, 
    { detailsVisible: false }, 
    { detailsVisible: false }, 
    { detailsVisible: false } 
]; 

toggleDetails(row: any) { 
    row.detailsVisible = !row.detailsVisible; 
} 

Вы можете сделать это с помощью ng-container:

<table> 

    <ng-container *ngFor="let row of rows"> 
     <tr> 
      <td (click)="toggleDetails(row)">show details</td> 
     </tr> 

     <tr *ngIf="row.detailsVisible"> 
      <td>only visible after click on details cell</td> 
     </tr> 
    </ng-container> 

</table> 

Надеется, что это помогает.