Fórum Como fazer um cálculo em uma tabela ng2-smart-table #618569
16/08/2022
0
Estou tentando fazer um calculo entre dois campos e quero mostrar o resultado em outro ao adicionar um novo item em uma tabale ng2-smart-table.
Veja como estou fazendo:
Meu componente personalizado:
Na imagem abaixo mostra que esta carregando o componente personalizado, porem não estou conseguindo calcular os campos.
https://i.stack.imgur.com/htETU.png
Se alguém tiver uma outra solução, eu quero criar uma tabela dinâmica e ao adicionar um novo item gostaria de calcular a Temperatura media de forma automática inserido apenas a Máxima e a Minima.
Veja como estou fazendo:
Estou tentando fazer um calculo entre dois campos e quero mostrar o resultado em outro ao adicionar um novo item em uma tabale ng2-smart-table.
Veja como estou fazendo:
import { Observable } from ''rxjs'';
import { Component, OnInit } from ''@angular/core'';
import { Clima } from ''src/app/model/Clima'';
import { ClimaService } from ''src/app/service/clima.service'';
import { ActivatedRoute, Router } from ''@angular/router'';
import {
SmartTableDatepickerComponent,
SmartTableDatepickerRenderComponent,
} from ''src/app/smart-table-datepicker/smart-table-datepicker.component'';
import { CustomComponent } from ''./custom.component'';
import { LocalDataSource, ViewCell } from ''ng2-smart-table'';
@Component({
selector: ''app-clima'',
templateUrl: ''./clima.component.html'',
styleUrls: [''./clima.component.css''],
})
export class ClimaComponent implements OnInit {
climas: Observable<Clima[]>;
clima = new Clima();
idFazenda: Number = +JSON.parse(localStorage.getItem(''idFazenda''));
settings = {
add: {
addButtonContent: ''<i class="nb-plus"></i>'',
createButtonContent: ''<i class="nb-checkmark"></i>'',
cancelButtonContent: ''<i class="nb-close"></i>'',
confirmCreate: true,
},
edit: {
editButtonContent: ''<i class="nb-edit"></i>'',
saveButtonContent: ''<i class="nb-checkmark"></i>'',
cancelButtonContent: ''<i class="nb-close"></i>'',
confirmSave: true,
},
delete: {
deleteButtonContent: ''<i class="nb-trash"></i>'',
confirmDelete: true,
},
columns: {
dataClima: {
title: ''Data Clima'',
type: ''custom'',
renderComponent: SmartTableDatepickerRenderComponent,
width: ''250px'',
filter: false,
sortDirection: ''desc'',
editor: {
type: ''custom'',
component: SmartTableDatepickerComponent,
},
},
temperaturaMaxima: {
title: ''Temperatura Máxima'',
type: ''number'',
},
temperaturaMinima: {
title: ''Temperatura Mínima'',
type: ''number'',
},
temperaturaMedia: {
title: ''Temperatura Média'',
type: ''number'',
editor: {
type: ''custom'',
component: CustomComponent,
onComponentInitFunction: (instance: any) => {
instance.save.subscribe(row => {
//this.source.refresh();
});
},
},
},
umidadeRelativa: {
title: ''Umidade Relativa'',
type: ''number'',
},
velocidadeVento: {
title: ''Velecidade do Vento'',
type: ''number'',
},
precipitacao: {
title: ''Precipitação Total'',
type: ''number'',
},
radiacaoMedia: {
title: ''Radiação'',
type: ''number'',
},
},
};
constructor(
private climaService: ClimaService,
private router: Router,
private routeActive: ActivatedRoute
) {}
ngOnInit(): void {
let idFazenda: Number = +JSON.parse(localStorage.getItem(''idFazenda''));
this.climaService.getClimaListByFazenda(idFazenda).subscribe(data => {
//this.source.load(data);
this.climas = data;
//this.total = data.totalElements;
});
}
novo() {
this.clima = new Clima();
}
excluirClima(event) {
if (window.confirm(''Tem certeza de que deseja excluir?'')) {
this.climaService.deletarClima(event.data.idClima).subscribe(data => {
// console.log("Retorno do método delete : " + data);
//this.culturas.splice(index, 1);/*Remover da tela*/
// this.usuarioService.getStudentList().subscribe(data => {
// this.students = data;
// });
});
event.confirm.resolve();
} else {
event.confirm.reject();
}
}
salvarClima(event) {
console.log(''Edit Event In Console'');
console.log(event);
if (
this.clima.idClima != null &&
this.clima.idClima.toString().trim() != null
) {
/* Atualizando ou Editando*/
console.log(this.clima);
this.climaService.updateClima(this.clima).subscribe(data => {
this.novo();
this.router.navigate([''climaList'']);
console.info(''Clima Atualizado: '' + data);
});
} else {
event.newData.idFazenda = this.idFazenda;
console.log(''Create Event In Console'');
console.log(event);
this.climaService.salvarClima(event.newData).subscribe(data => {
/*Salvando um novo Clima */
this.novo();
console.info(''Gravou Clima: '' + data);
});
event.confirm.resolve(event.newData);
}
}
onEditConfirm(event) {
console.log(''Edit Event In Console'');
console.log(event);
this.climaService.updateClima(event.newData).subscribe(data => {
this.novo();
console.info(''Clima Atualizado: '' + data);
});
event.confirm.resolve(event.newData);
}
}Meu componente personalizado:
import { Component, Output, EventEmitter } from ''@angular/core'';
@Component({
selector: ''custom-component'',
template: `<td>
<input
[(ngModel)]="rowData.temperaturaMedia"
(ngModelChange)="onModelChange()"
/>
</td>`,
})
export class CustomComponent {
rowData: any;
@Output() save: EventEmitter<any> = new EventEmitter();
onModelChange() {
var tMaxima: number = this.rowData.temperaturaMaxima;
var tMinima: number = this.rowData.temperaturaMinima;
this.rowData.temperaturaMedia = (tMaxima + tMinima) / 2;
this.save.emit(this.rowData);
console.log(this.rowData.temperaturaMedia);
}
}Na imagem abaixo mostra que esta carregando o componente personalizado, porem não estou conseguindo calcular os campos.
https://i.stack.imgur.com/htETU.png
Se alguém tiver uma outra solução, eu quero criar uma tabela dinâmica e ao adicionar um novo item gostaria de calcular a Temperatura media de forma automática inserido apenas a Máxima e a Minima.
ítalo Araújo
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)