Показать только щелкнул вид

Question

У меня есть этот шаблон (часть):

 <tbody *ngFor='let list of lists'> 
       <tr> 
        <td>{{ list.name }}</td> 
        <td>{{ list.location }}</td> 
        <td>{{ list.type_id }}</td> 
        <td>{{ list.gos_prinad_id }}</td> 
        <td>{{ list.disloc_country_id }}</td> 
        <td>{{ list.adm_terr_id }}</td> 
        <td><a (click)="toggleElement()">смотр.</a></td> 
        <td>{{ list.lat }}</td> 
        <td>{{ list.lon }}</td> 
        <td>{{ list.alt }}</td> 
       </tr> 
       <tr [hidden]="hideElement" *ngFor="let new_var of list.hops"> 
        <td>{{ new_var.hop_type }}</td> 
        <td>{{ new_var.id_sl_hop }}</td> 
        <td>{{ new_var.hop_text }}</td> 
       </tr> 
     </tbody> 

И это toogleElement() для шкуры и показать некоторые данные:

toggleElement(){ 
     if(this.hideElement) { 
      this.hideElement = false; 
     }else{ 
      this.hideElement = true; 
     } 

Теперь, когда я нажимаю смотр. после каждого line открыть новую форму

<tr [hidden]="hideElement" *ngFor="let new_var of list.hops"> 
        <td>{{ new_var.hop_type }}</td> 
        <td>{{ new_var.id_sl_hop }}</td> 
        <td>{{ new_var.hop_text }}</td> 
       </tr> 
     </tbody> 

Но я бы хотел, чтобы эта форма не повторялась после всех строк, d открываются только один за другим.

P.S. Извините за мой английский.

Answer 1

toggleElement(list){ 
    list.isVisible= !list.isVisible; 
} 

<tbody> 
    <template ngFor let-list [ngForOf]="lists"> 
     <tr> 
      <td>{{ list.name }}</td> 
      <td>{{ list.location }}</td> 
      <td>{{ list.type_id }}</td> 
      <td>{{ list.gos_prinad_id }}</td> 
      <td>{{ list.disloc_country_id }}</td> 
      <td>{{ list.adm_terr_id }}</td> 
      <td><a (click)="toggleElement(list)">смотр.</a></td> 
      <td>{{ list.lat }}</td> 
      <td>{{ list.lon }}</td> 
      <td>{{ list.alt }}</td> 
     </tr> 
     <tr [hidden]="!list.isVisible" *ngFor="let new_var of list.hops"> 
      <td>{{ new_var.hop_type }}</td> 
      <td>{{ new_var.id_sl_hop }}</td> 
      <td>{{ new_var.hop_text }}</td> 
     </tr> 
    </template> 
</tbody>