Bem-vindos à nossa comunidade!

Junte-se a nós e faça parte hoje mesmo!

Manipular dados da coluna de um ngx-datatable

dmartins

Novo Membro
Cadastro
1/9/21
Postagens
2
Curtidas
0
Pontuação
1
Cidade
Campinas
Oi pessoal primeiro bom dia! estou precisando da ajudade vocês se alguem puder me ajudar agradeceira, adquirimos um template de angular com as seguintes dependencias
E infelizmente ficamos sem nosso dev principal front-end e backend que mexia muito bem com isso, então eu o ajuda nas telas com o layout em e personalização apenas quando precisa-se já qu estamos em um template.
So que eu precisaria personalizar os dados de uma ngx-datatable, mais precisamente em uma ngx-datatable-column, para representar como esta no html o codigo esta assim:

- periodo.component.html:
<ngx-datatable #table class="material teste" [rows]="listaDePeriodosDaTabela" [columns]="columns" [sortType]="'multi'"
[headerHeight]="50" [footerHeight]="50" [rowHeight]="'60'" [limit]="10" >
<ngx-datatable-column *ngFor="let col of columns" [name]="col.name" [prop]="col.prop" [width]="80">
</ngx-datatable-column>

===============

Reparem que ai temos um ngFor que pega um array de objetos do meu type script .ts do arquivo periodo.component.ts e dentro claro aqui estao todos os codigos mais precisamente estes que são passados ai no ng for:
columns = [
{ name: 'Segunda', prop :'Segunda'},
{ name: 'Terca', prop : 'Terca' },
{ name: 'Quarta' ,prop :'Quarta'},
{ name: 'Quinta' , prop :'Quinta'},
{ name: 'Sexta' , prop:'Sexta'},
{ name: 'Sabado' , prop : 'Sabado'},
{ name: 'Domingo', prop : 'Domingo' },
{ name: 'Fixa', prop : 'Fixa' },
{ name: 'Hora início' , prop : 'HoraInicio' },
{ name: 'Hora fim' , prop : 'HoraFim'}
];

No final quando o navegador exibe temos a imagem com o ngx-datatable as suas colums e rows é ai que preciso de ajuda, eu preciso que esses dados retornados sejam:
- quando colum segunda de valor true não seja mostrado true na tela e sim uma bola redonda verde para indicar que esta ativo.
- quando colum segunda de valor false não seja mostrado false na tela e sim uma bola redonda vermelha para indicar que esta inativo.

E claro não posso mexer nos valores das colunas horario inicio e horario fim e Actions.

A imagem a esquerda são os valores marcados em verde = true e os valores marcado em vermelho = false, então ao lado direito é o que eu preciso o que é true fica bolinha verde e o que é false bolinha vermelha "apenas isso".




Infelizmente não tenho experiencia e conhecimento suficiente para fazer isso e precisaria muito terminar pelo menos isso se alguem puder me ajudar eu agradeceria, um grande abraço a todos e que Deus nos abençoe!.
 

dmartins

Novo Membro
Cadastro
1/9/21
Postagens
2
Curtidas
0
Pontuação
1
Cidade
Campinas
Oi pessoal boa tarde eu consegui um avanço bom mas parei em outra parte aqui, consegui que afetasse as linhas de um coluna especifica mas precisaria que afetasse as outras colunas que eu quero, vocês tem alguma ideia? vou postar aqui um trecho do código que eu consegui para afetar somentes os dados da coluna Segunda, mas como fazer isso para as outras [terca, quarta, quinta, sexta, sabado, domingo e fixa].

html:
<ng-container *ngFor='let col of columns'>
<ngx-datatable-column [width]="80" *ngIf='col.name === "Segunda"' name="Segunda" prop="Segunda">
<ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
<div class="valorPeriodoVerdadeiro" *ngIf="value === true"> </div>
<div class="valorPeriodoFalso" *ngIf="value === false"></div>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [width]="80" *ngIf='col.name !== "Segunda"' name="{{col.name}}"
prop="{{col.prop}}">
</ngx-datatable-column>
</ng-container>

Resultado em anexo, uma imagem que mostra a coluna da segunda ok!, só que precisaria também nas outras colunas.
 

Attachments

  • perfect.jpg
    perfect.jpg
    95,7 KB · Visualizações: 1
Top