Ola boa tarde , depois de fazer o curso de Angular 6 e os execícios , estou testando meus conhecimentos em um projeto próprio.
Assim estou com uma duvida .
Meu cenário :
tenho 2 arrays .
dpCategoriaFaqD:CategoriaFaq[] = [];
dpCategoriaFaqR:CategoriaFaq[] = [];estes 2 arrays , guardam as categorias Disponíveis e relacionadas de um artigo. trazidos da api , exibidos dentro de um table , onde o usuário pode adicionar ou remover entre as tabelas as categorias que deseja.
E tudo isso funciona perfeitamente.
Porem para não ficar um lista muito grande na pagina , resolvi implementar um componente de paginação
<cp-table [vExibeTabel]='!!vRegArtigo.CODARTIGO_FAQ'
[vColuna]="tbCategoria" >
<tbody style="min-height: 100px;">
<tr class="bg-light" *ngFor="let inf of fGetTabelaCategoria(PagCatD.fGetPagina(),'D')">
<th scope="row">{{inf.DESCRICAO}}</th>
<td class="float-right">
<button class="btn btn-xs btn-success btn3d " (click)="fInsertCategoria(inf.CODCATEGORIA_FAQ)">
<i class="fa fa-pencil "></i>
</button>
</td>
</tr>
</tbody>
</cp-table>
<div class=" text-center alert alert-danger" *ngIf="!dpCategoriaFaqD.length>0">
Não exist
e registro!
</div>
<cp-paginacao [exibe]="true" [dpPagina]="dpCategoriaFaqD" #PagCatD></cp-paginacao>export class PaginacaoComponent implements OnChanges {
@Input() dpPagina = [];
@Input() exibe : boolean = true;
_dpPagina = [];
//@Output() pagselec = new EventEmitter<string>();
private _PaginaSelecionada = '0';
ngOnChanges(changes: SimpleChanges): void {
if(changes.dpPagina){
this._dpPagina = this.fListaTabela(this.dpPagina);
}
}
fSelecinaPag(pag){
this._PaginaSelecionada = pag;
//this.pagselec.emit(pag);
}
fGetPagina():string{
return this._PaginaSelecionada;
}
fListaTabela (dp:any){
const _dp=[];
for (let i = 0; i < dp.length; i+=5) {
_dp.push(dp.slice(i,i+5));
}
return _dp;
}
E meu problema é que guando eu realizo um push direto do que alimenta o dp da paginação não atualiza .
Para contornar meu problema , métodos do serviço.
//metodo do componente
this.vAlert.success('Adicionado Categoria do Artigo com Sucesso!');
this.dpCategoriaFaqD = this.categoria.fRemoveCategoria(this.dpCategoriaFaqD,vCOD);
this.dpCategoriaFaqR = this.con.fAtualizaDp(this.dpCategoriaFaqR,this.vRegCatD);// metodo do serviço categoria
fRemoveCategoria(dp,VALOR){
var vReg = dp.filter(function(elem){
if(elem.CODCATEGORIA_FAQ != VALOR){
return elem;
}
});
if(vReg!=undefined){
return <CategoriaFaq> vReg;
}
return dp;
}
// metodo de um serviço global que tenho utilizado paa resolver
meu problema.
fAtualizaDp(dp,vReg){
var _dp = dp.filter(function(elem){
return elem;
});
if(vReg!=null){
_dp.push(vReg);
}
return _dp;
}
Então somente dessa maneira , eu consigo atualizar o meu da tabela e o da paginação e estes trabalharem simultaneamente.
Porem assim por mais que resolva , ta uma gambiarra e assim gostaria de saber qual seria melhor tecnica para que eu possa da um " refresh" no meu array e ele atualizar os componetes sem a necessidade dessa volta toda que eu estou dando.
