Eduard Arevshatyan Eduard Arevshatyan - 2 months ago 18
TypeScript Question

Show only clicked view

I have this template (a part):

<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>


And this is a
toogleElement()
for hide and show some data:

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


Now, when i press
смотр.
after each line open a new form

<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>


But i would that this form are dont repeated after all rows, and open only one by one.

P.S. Sorry for my english.

Answer

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>

Comments