Jump to content
  • 0
Guilherme Costa Lopes

Componente para paginação em angular 6

Question

Estou fazendo assim:

 

paginacao.service.ts

    import { Injectable, EventEmitter } from '@angular/core';

    @Injectable({
      providedIn: 'root'
    })
    export class PaginacaoService {

      public static modelo = new EventEmitter<any>();
      public static primeiraPagina = new EventEmitter<any>();
      public static paginaAnterior = new EventEmitter<any>();
      public static proximaPagina = new EventEmitter<any>();
      public static ultimaPagina = new EventEmitter<any>();
      public static paginaAtual = new EventEmitter<any>();
      public static totalPagina = new EventEmitter<any>();
      public static totalRegistros = new EventEmitter<any>();
    }

 

paginacao.component.ts

  import { Component, OnInit } from '@angular/core';

    import { PaginacaoService } from '../../../service/paginacao/paginacao.service';

    @Component({
      selector: 'app-paginacao',
      templateUrl: './paginacao.component.html',
      styleUrls: ['./paginacao.component.css']
    })
    export class PaginacaoComponent implements OnInit {

      /**
       * variáveis de paginação
       */
      public totalPagina: number;
      public totalRegistros: number;
      public paginaAtual: number;

      public modelo: any;

      constructor(
        protected paginacaoService: PaginacaoService
      ) {}

      ngOnInit() {
        this.preencherVariaveisComponente();
      }

      private preencherVariaveisComponente() {
        PaginacaoService.paginaAtual.subscribe(
          paginaAtual => {
            this.paginaAtual = paginaAtual;
          }
        );
      }
    }

 

paginacao.component.html

 

    Página <b>{{paginaAtual}}</b> de <b>{{totalPagina}}</b> - 
              Total de Registros: <b>{{totalRegistros}}</b>

 

A variável nunca é atualizada, mesmo o serviço trazer o valor, conforme imagem:

 

Se preencho valor assim:

    this.paginaAtual = 1;
        PaginacaoService.paginaAtual.subscribe(
          paginaAtual => {
            this.paginaAtual = paginaAtual;
          }
        );

 

Funciona, mas se o valor vier pelo servico, conforme imagem, não funciona. O que pode ser ?

paginaAtual.png

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By rdavisp
      Senhores, boa tarde.

      Pesquisei muito antes de abrir esse post, inclusive aqui, neste fórum. Encontrei dúvidas parecidas as quais tentei adaptar ao meu caso porem sem sucesso.

      A questão é a seguinte:

      Foi desenvolvida uma API em ASP.NET Core 2.0, mas por algumas solicitações do cliente, necessitei migrar para a versão 3.1. Existe uma SPA em Angular 7 que faz a requisição à API através de um método POST passando os parâmetros para a API que retornava um conjunto de dados para aplicação montar a tela. Após a atualização parou de funcionar! Por isso, gostaria de pedir a ajuda de vocês, por que, eu já esgotei as minhas tentativas.

      **No Controller da API está da seguinte maneira:**
       
      1 2 3 4 5 6 7 8 [HttpPost] [Route("api/[controller]")] public IGResult Post(Filtro filtro) {     Console.WriteLine("filtro: " + filtro);     var app = new IgApplication();     return app.getInstrucoes(filtro); }
      **E no angular se encontra dessa forma:**
       
      1 return this._http.post<IgResult>(environment.url + 'api/IG',  this.Filtro, options)

      Ao debugar a API, percebo que os dados do parâmetro **body** chegam nulos. Já tentei das seguintes maneiras abaixo, mudar a implementação do POST na API porém sem sucesso:
       
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 > //public async Task<IActionResult> Post([FromBody] Filtro pessoa) >         //public HttpResponseMessage Post(Filtro pessoa) >         //public async Task<ActionResult<IList<Todo>>> Create([FromBody]TodoCreateViewModel model) >         //public Task<IActionResult> Post([FromBody] Filtro filtro) >         //public ActionResult<Filtro> Post([FromBody] Filtro filtro) >         //public HttpResponseMessage Post(Filtro filtro) >         //public string Post([FromBody] Filtro filtro) >         //public IActionResult Post([FromBody] Filtro filtro) >         //{ >         //var app = new IgApplication(); >         //return app.getInstrucoes(filtro); >         //return null;// Json(filtro); >         //} >         //public async System.Threading.Tasks.Task<string> Post(HttpRequestMessage request) >         //{ >         //    string body = await request.Content.ReadAsStringAsync(); >         //    return body; >         //}

      Por isso se possível, gostaria muito de contar com a colaboração de vocês.

      Desde já muito obrigado!
    • By rdavisp
      Senhores, bom dia.
      Mais uma vez recorro a ajuda de vocês para algo que não domino ainda. Vamos lá!
      Tenho uma API que quando startada, ela sobe no seguinte endereço: http://localhost:49013/api/values. Percebi que isto é parametrizado no arquivo launchSettings.json, que está assim:
       
      {   "iisSettings": {     "windowsAuthentication": false,     "anonymousAuthentication": true,     "iisExpress": {       "applicationUrl": "http://localhost:49013/",       "sslPort": 0     }   },   "profiles":    {     "IIS Express": {       "commandName": "IISExpress",       "launchBrowser": true,       "launchUrl": "api/values",       "environmentVariables": {         "ASPNETCORE_ENVIRONMENT": "Development"       }     },     "Cliente.IG.WebAPI": {       "commandName": "Project",       "launchBrowser": true,       "launchUrl": "api/values",       "environmentVariables": {         "ASPNETCORE_ENVIRONMENT": "Development"       },       "applicationUrl": "http://localhost:49012/"     }   } }  
      No meu controller da API, tenho seguinte método dentro do namespace:
       
          [Produces("application/json")]     [Route("api/IG")]     [ApiController]     public class IGController : Controller     {         [HttpPost]         public IGResult Post([FromBody] Filtro filtro)         {             var app = new IgApplication();             return app.getInstrucoes(filtro);         }     }  
      O "IgApplication" cria uma instância da classe onde é gerado uma lista que é populada com os valores atribuídos do DAO.
       
      Quando inicializo a aplicação "A" em angular através do localhost (http://localhost:4200/). Dentro do meu arquivo environment.prod.ts tenho a chamada:
       
      export const environment = {   production: true,   url: 'http://localhost:49013/' };  
      Ela passa por esse controller e segue o fluxo e faz o que tem que ser feito. 
      Porém, eis a questão! Eu possuo a aplicação "B", que acessa a mesma API porém possui funcionalidades diferente, por isso, dentro do mesmo controller eu criei uma nova classe e um método:
       
          [Produces("application/json")]     [Route("api/Item")]     public class APIIgItemController : Controller     {         [HttpGet]         public ItensResult Post([FromBody] Itens ValorItem)         {             var app = new CRUDApplication();             return app.GetItens();         }     }  
      Como faço para quando for startar a aplicação "B", ele passe por esse método "ItensResult" ao invés "IGResult", sendo que ambas são executadas pelo localhost:4200? Ou isso eu defino na aplicação angular? Vi que é possível configurar mais de uma "applicationUrl" dentro do json. Devo considerar essa configuração?
       
      Grato a quem puder ajudar!
       
    • By brunopeople
      Eu estou fazendo um projeto de CRUD consumindo uma API Restfull com banco de dados mongoDB para uma teste de vaga de emprego, eu fiz a aplicação e ela roda sem erros nenhum, porém ao adicionar o registro do post ele não está adicionando o registro no banco de dados? Eu não consegui realmente encontrar o erro do por que isto está acontencendo ou por que? eu gostaria muito de alguém me ajudasse. 
       
      https://github.com/brunopeople/Teste-RedFox-Full-Stack
    • By seres
      Boa tarde,
      Estou tendo dificuldade pra carregar uma tela de edição de usuários, mais especificamente pra carregar os perfis, que são dinâmicos e apresentados como checkboxes.
      Eu tenho essa três entidades:
      Usuário:
      export class Usuario { id: number; nome: string; telefone: string; email: string; } Perfil:
      export class Perfil { id: number; nome: string; } UsuarioPerfil (tabela que relaciona quais perfis o usuário tem)
      export class UsuarioPerfil { id: number; idUsuario: number; idPerfil: number; } Inicialmente eu carrego todos os perfis da base e os apresento como checkboxes no trecho de ngOnInit abaixo. 
      São apresentados assim no banco, por exemplo:
      ID_USUARIO ID_PERFIL 98 8 98 9 Isso quer dizer que o usuário 98 tem os perfis de Usuario(8) e N1(9).
      Então eu gostaria de alguma maneira de, conforme eu for iterando os checkboxes no loop do html eu chamasse a função do spring passando so id do perfil e o id do usuário (98) e (caso voltasse ok do serviço (quando passar 8 e 9, que são os que existem), eu marcasse o checkbox como “checked”. Ou alguma outra solução mais adequada.
      Como eu poderia fazer isso?
       
      HTML:
       
      <h3>Alterar Usuario</h3> <div [hidden]="submitted" style="width: 400px;"> <form (ngSubmit)="onSubmit()"> <div class="form-group"> <label for="name">Nome</label> <input type="text" class="form-control" id="nome" required [(ngModel)]="usuario.nome" name="nome"> </div> <div class="form-group"> <label for="telefone">Telefone</label> <input type="text" class="form-control" id="telefone" required [(ngModel)]="usuario.telefone" name="telefone"> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" id="email" required [(ngModel)]="usuario.email" name="email"> </div> <h4>Perfis</h4> <table class="table table-striped"> <thead> </thead> <tbody> <tr *ngFor="let perfil of perfilData"> <input type='checkbox' id="perfil{{perfil.id}}" > {{perfil.nome}} </tr> </tbody> </table> <button type="submit" class="btn btn-success">Submit</button> </form> </div> TS:
       
      import { Component, OnInit } from '@angular/core'; import { Usuario } from '../usuario'; import { ActivatedRoute, Router } from '@angular/router'; import { UsuarioService } from '../usuario.service'; import { PerfilService } from './../perfil.service'; import { Perfil } from "./../perfil"; import { UsuarioPerfilService } from './../usuarioperfil.service'; @Component({ selector: 'app-update-usuario', templateUrl: './update-usuario.component.html', styleUrls: ['./update-usuario.component.css'] }) export class UpdateUsuarioComponent implements OnInit { id: number; usuario: any; perfisservico: Observable<Perfil[]>; perfilData:any=[]; constructor(private route: ActivatedRoute,private router: Router, private usuarioService: UsuarioService, private perfilService: PerfilService, private usuarioperfilService: UsuarioPerfilService) { } ngOnInit() { this.usuario = new Usuario(); this.id = this.route.snapshot.params['id']; this.usuarioService.getUsuario(this.id) .subscribe(data => { console.log(data) this.usuario = data; }, error => console.log(error)); this.perfilService.getPerfisList() .subscribe(res=> { if (res) { this.perfisservico= res; this.perfilData = this.perfisservico; } }) } updateUsuario() { this.usuarioService.updateUsuario(this.id, this.usuario) .subscribe(data => console.log(data), error => console.log(error)); this.usuario = new Usuario(); this.gotoList(); } onSubmit() { this.updateUsuario(); } gotoList() { this.router.navigate(['/usuarios']).then(() => { window.location.reload(); }); } }
    • By ckcesar
      Galera alguém pode me ajudar, eu gerei uma Build com AngularCli e tento rodar ela com o Cordova e ao inspecionar no Chrome me retorna o seguinte erro no console:
      main-es2015.7678d805abc29502169b.js:1 Service worker registration failed with: TypeError: Failed to register a ServiceWorker: The URL protocol of the current origin ('file://') is not supported. at g._next (main-es2015.7678d805abc29502169b.js:1) at g.__tryOrUnsub (main-es2015.7678d805abc29502169b.js:1) at g.next (main-es2015.7678d805abc29502169b.js:1) at f._next (main-es2015.7678d805abc29502169b.js:1) at f.next (main-es2015.7678d805abc29502169b.js:1) at Kl._next (main-es2015.7678d805abc29502169b.js:1) at Kl.next (main-es2015.7678d805abc29502169b.js:1) at Dl._next (main-es2015.7678d805abc29502169b.js:1) at Dl.next (main-es2015.7678d805abc29502169b.js:1) at G.notifyNext (main-es2015.7678d805abc29502169b.js:1)  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.