0

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>

1 Resposta 1

0

Acredito que quando você chama a função getsubgrupo(id) ele está igualando os dois array, e não criando uma cópia do novo, faça um slice

getsubgrupo(id:number){
     this.patrimonioService
         .obterPatrimonioSubGrupo(id)
         .subscribe(a => { this.objSubGrupo = a.slice()},
          error => console.log(error)
      );
1
  • Olá, não deu certo com slice, o comportamento continua o mesmo tanto para o primeiro click (não funcionar) quanto no momento do click abre o acordion e fecha na sequencia. 27/09/2021 às 20:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .