Tenho o seguinte funcionamente na aplicação:
Consumindo de uma webapi interna.
1 - Ao acessar página, table principal exibindo os dados nomeado de (Grupo), onde é listado sendo a primeira coluna fixa e as demais os valores correspondentes a uma entidade mas sempre com essa coluna lateral fixa na esquerda acompanhando o scroll para direita.
2 - Cada row de um (grupo) deve possui rows de (subgrupo) na qual é chamada uma observable com parametro do grupoid. estou utilizando um mecanismo de acordion, porém com propriedade do html sendo collapse e attr para setar id dinamicamente do indice, da seguinte forma:
- tr (grupo) onde seu th possui a propriedade attr e targe collapse e o (click) invocando observable com dados subgrupo da webapi.
- tr (subgrupo) invocado pelo tr th pai (grupo). O problema está ao clicar no tr (grupo) que ao invocar o metodo getsubgrupo(grupoid), o primeiro click não é setado o objeto subgrupo e não é montado de primeira as rows do subgrupo (filho), porém no segundo click é montado mas ocorre o efeito de expandir e recolher ao mesmo tempo.
código é esse:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { PatrimonioBr } from 'src/app/Patrimonio/models/PatrimonioBr';
import { PatrimonioService } from 'src/app/Patrimonio/services/patrimonio.service';
@Component({
selector: 'app-relatorio-patrimonio',
templateUrl: './relatorio-patrimonio.component.html',
styleUrls: ['./relatorio-patrimonio.component.css']
})
export class RelatorioPatrimonioComponent implements OnInit {
public patrimoniobr: PatrimonioBr[];
public objSubGrupo: PatrimonioBr[];
public parametroid;
constructor(private patrimonioService: PatrimonioService, private route: ActivatedRoute, private spinner: NgxSpinnerService){}
ngOnInit(){
this.patrimonioService
.obterPatrimonioGrupo()
.subscribe(pt => {
this.patrimoniobr = pt;
},
error => console.log(error)
);
};
getsubgrupo(id:number){
this.patrimonioService
.obterPatrimonioSubGrupo(id)
.subscribe(a => { this.objSubGrupo = a},
error => console.log(error)
);
}
}
body{
margin-bottom: 50px;
background-color: #ffffff;
overflow: hidden;
}
.main-container{
padding-top: 80px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 100px;
margin-right: auto;
margin-left: auto;
/* overflow: hidden; */
background-color: transparent;
}
.footer{
position: relative;
bottom: 0;
width: 100%;
white-space: nowrap;
height: 10px;
line-height: 60px;
}
table {
/* border-collapse: collapse; */
font-family: helvetica;
/* caption-side: top; */
text-transform: capitalize;
}
td,
th {
border: 0.11px solid black;
padding: 1px;
/* min-width: 200px; */
min-width: 10px;
font-size: 13px;
background: #fff;
box-sizing: border-box;
text-align: left;
}
th {
box-shadow: 0 0 0 1px black;
}
.table-container {
position: relative;
max-height: 700px;
width: 100%;
overflow: scroll;
}
thead th,
tfoot th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
background: rgb(216, 216, 216);
}
tfoot th:first-child {
background-color: #6f7172;
color: #fff;
}
thead tr :first-child {
background: rgb(216, 216, 216);
}
thead th:first-child,
tfoot th:first-child {
left: 0;
z-index: 3;
}
tfoot {
position: -webkit-sticky;
bottom: 0;
z-index: 2;
}
tfoot th {
position: sticky;
bottom: 0;
z-index: 2;
border-top: 1px solid black;
background: hsl(52, 32%, 82%);
}
tfoot td:first-child {
z-index: 3;
}
tbody {
overflow: scroll;
height: 200px;
}
/* Coluna GRUPO FIXED */
tr> :first-child {
position: -webkit-sticky;
position: sticky;
background: hsl(0, 3%, 83%);
min-width: 200px;
box-shadow: inset 0px 0.31px black;
left: 0;
}
a {
text-decoration: none;
list-style: none;
color: rgb(59, 33, 33);
}
::-webkit-scrollbar-track {
background-color: rgb(255, 255, 255);
}
::-webkit-scrollbar {
width: 8px;
background: rgb(0, 0, 0);
}
::-webkit-scrollbar-thumb {
background: #817d7d;
border-radius: 0px;
}
a {
text-decoration: none;
list-style: none;
color: rgb(59, 33, 33);
}
.clickLinha {
background-color: #FFFF99 !important;
font-weight: bold;
}
.clickLinhaGrupo {
background-color: #b3b306 !important;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="main-container">
<ngx-spinner bdColor = "rgba(0, 0, 0, 0.8)"
size = "large"
color = "rgb(221, 199, 0)"
type = "timer"
[fullScreen] = "true">
<p style="color: rgb(221, 199, 0)" > Carregando... </p>
</ngx-spinner>
<div class="table-container">
<table>
<!--#region THEAD -->
<thead>
<tr>
<th>Grupo</th>
<th scope="col">LOC.<br />BRASIL</th>
<th scope="col">DISP.<br />BRASIL</th>
<th scope="col">OF1.LIMP.<br />BRASIL</th>
<th scope="col">OF1.DAN.<br />BRASIL</th>
<th scope="col">PATR.<br />BRASIL</th>
<th scope="col">LOC.<br />SP</th>
<th scope="col">DISP.<br />SP</th>
<th scope="col">OF1.LIMP.<br />SP</th>
<th scope="col">OF1.DAN.<br />SP</th>
<th scope="col">LOC.<br />RJ</th>
<th scope="col">DISP.<br />RJ</th>
<th scope="col">OF1.LIMP.<br />RJ</th>
<th scope="col">OF1.DAN.<br />RJ</th>
<th scope="col">LOC.<br />BH</th>
<th scope="col">DISP.<br />BH</th>
<th scope="col">OF1.LIMP.<br />BH</th>
<th scope="col">OF1.DAN.<br />BH</th>
<th scope="col">LOC.<br />RS</th>
<th scope="col">DISP.<br />RS</th>
<th scope="col">OF1.LIMP.<br />RS</th>
<th scope="col">OF1.DAN.<br />RS</th>
<th scope="col">LOC.<br />BA</th>
<th scope="col">DISP.<br />BA</th>
<th scope="col">OF1.LIMP.<br />BA</th>
<th scope="col">OF1.DAN.<br />BA</th>
<th scope="col">LOC.<br />CB</th>
<th scope="col">DISP.<br />CB</th>
<th scope="col">OF1.LIMP.<br />CB</th>
<th scope="col">OF1.DAN.<br />CB</th>
<th scope="col">LOC.<br />DF</th>
<th scope="col">DISP.<br />DF</th>
<th scope="col">OF1.LIMP.<br />DF</th>
<th scope="col">OF1.DAN.<br />DF</th>
<th scope="col">LOC.<br />CR</th>
<th scope="col">DISP.<br />CR</th>
<th scope="col">OF1.LIMP.<br />CR</th>
<th scope="col">OF1.DAN.<br />CR</th>
<!-- <th scope="col">LOC.<br />PE</th>
<th scope="col">DISP.<br />PE</th>
<th scope="col">OF1.LIMP.<br />PE</th>
<th scope="col">OF1.DAN.<br />PE</th> -->
</tr>
</thead>
<!--#endregion ENDTHEAD -->
<!--#region TBODY -->
<tbody>
<ng-container *ngFor="let item of patrimoniobr; index as i;">
<!--#region GRUPO -->
<tr>
<th
data-toggle="collapse"
[attr.data-target]="'#subgrupo' + i"
(click)="getsubgrupo(item.grupoid)"
>{{item.grupodesc}}</th>
<!--#region TD -->
<td>{{item.locbrbrasil}}</td>
<td>{{item.dispbrbrasil}}</td>
<td>{{item.of1limpbrbrasil}}</td>
<td>{{item.of1danbrbrasil}}</td>
<td>{{item.patrbrbrasil}}</td>
<td>{{item.locbrsp}}</td>
<td>{{item.dispbrsp}}</td>
<td>{{item.of1limpbrsp}}</td>
<td>{{item.of1danbrsp}}</td>
<td>{{item.locbrrj}}</td>
<td>{{item.dispbrrj}}</td>
<td>{{item.of1limpbrrj}}</td>
<td>{{item.of1danbrrj}}</td>
<td>{{item.locbrbh}}</td>
<td>{{item.dispbrbh}}</td>
<td>{{item.of1limpbrbh}}</td>
<td>{{item.of1danbrbh}}</td>
<td>{{item.locbrrs}}</td>
<td>{{item.dispbrrs}}</td>
<td>{{item.of1limpbrrs}}</td>
<td>{{item.of1danbrrs}}</td>
<td>{{item.locbrba}}</td>
<td>{{item.dispbrba}}</td>
<td>{{item.of1limpbrba}}</td>
<td>{{item.of1danbrba}}</td>
<td>{{item.locbrcb}}</td>
<td>{{item.dispbrcb}}</td>
<td>{{item.of1limpbrcb}}</td>
<td>{{item.of1danbrcb}}</td>
<td>{{item.locbrdf}}</td>
<td>{{item.dispbrdf}}</td>
<td>{{item.of1limpbrdf}}</td>
<td>{{item.of1danbrdf}}</td>
<td>{{item.locbrcr}}</td>
<td>{{item.dispbrcr}}</td>
<td>{{item.of1limpbrcr}}</td>
<td>{{item.of1danbrcr}}</td>
<!--#endregion END TD -->
</tr>
<!--#endregion END GRUPO -->
<!--#region SUB GRUPO -->
<tr class="collapse" id="subgrupo{{i}}" *ngFor="let itemsgb of objSubGrupo">
<th>{{itemsgb.subgrupodesc}}</th>
<td>{{itemsgb.locbrbrasil}}</td>
<td>{{itemsgb.dispbrbrasil}}</td>
<td>{{itemsgb.of1limpbrbrasil}}</td>
<td>{{itemsgb.of1danbrbrasil}}</td>
<td>{{itemsgb.patrbrbrasil}}</td>
<td>{{itemsgb.locbrsp}}</td>
<td>{{itemsgb.dispbrsp}}</td>
<td>{{itemsgb.of1limpbrsp}}</td>
<td>{{itemsgb.of1danbrsp}}</td>
<td>{{itemsgb.locbrrj}}</td>
<td>{{itemsgb.dispbrrj}}</td>
<td>{{itemsgb.of1limpbrrj}}</td>
<td>{{itemsgb.of1danbrrj}}</td>
<td>{{itemsgb.locbrbh}}</td>
<td>{{itemsgb.dispbrbh}}</td>
<td>{{itemsgb.of1limpbrbh}}</td>
<td>{{itemsgb.of1danbrbh}}</td>
<td>{{itemsgb.locbrrs}}</td>
<td>{{itemsgb.dispbrrs}}</td>
<td>{{itemsgb.of1limpbrrs}}</td>
<td>{{itemsgb.of1danbrrs}}</td>
<td>{{itemsgb.locbrba}}</td>
<td>{{itemsgb.dispbrba}}</td>
<td>{{itemsgb.of1limpbrba}}</td>
<td>{{itemsgb.of1danbrba}}</td>
<td>{{itemsgb.locbrcb}}</td>
<td>{{itemsgb.dispbrcb}}</td>
<td>{{itemsgb.of1limpbrcb}}</td>
<td>{{itemsgb.of1danbrcb}}</td>
<td>{{itemsgb.locbrdf}}</td>
<td>{{itemsgb.dispbrdf}}</td>
<td>{{itemsgb.of1limpbrdf}}</td>
<td>{{itemsgb.of1danbrdf}}</td>
<td>{{itemsgb.locbrcr}}</td>
<td>{{itemsgb.dispbrcr}}</td>
<td>{{itemsgb.of1limpbrcr}}</td>
<td>{{itemsgb.of1danbrcr}}</td>
</tr>
<!--#endregion SUB GRUPO -->
<!--#region ITEM -->
<tr id="item{{i}}" class="itemtr collapse" >
<th class="itemth">Item</th>
</tr>
<!--#endregion END ITEM -->
</ng-container>
</tbody>
<!--#endregion END TBODY -->
<!--#region TFOOTY -->
<tfoot>
<tr>
<th>Total</th>
<th *ngFor="let item of patrimoniobr">0</th>
</tr>
</tfoot>
<!--#endregion END TFOOTY -->
</table>
</div>
</div>