Ad

Empty List When I Navigate To Another Page

- 1 answer

I have an application with angular 7 and ionic 4. The application has a side menu where I navigate between different pages. When I navigate between the list and detail or add a new item, there is no problem: Correct navigation: https://i.stack.imgur.com/Y4cpF.gif The problem is reproduced when I navigate between the different menu options: Problem: https://i.stack.imgur.com/TqI5N.gif The first time I enter, it works correctly, but when I return to the page, it does not load the list. Does not return errors in console. I retrieve the listings in the ngOnInit method of each Page.

centro-listado.page.ts

...
export class CentroListadoPage implements OnInit {

  private titulo = 'Centros';
  private centros: Centro[];

  constructor(private menu: MenuController, private loadingController: LoadingController, private centroService: CentroService,
    private router: Router, private toastService: ToastService, private alertController: AlertController) { }

  ngOnInit() {
    this.menu.enable(true);
    this.centroService.getCentros().subscribe(res =>
      this.centros = res
    );
  }
   ...
}

usuario-listado.page.ts

...
export class UsuarioListadoPage implements OnInit {

  private titulo = 'Usuarios';
  private usuarios: Usuario[];


  constructor(private menu: MenuController, private loadingController: LoadingController, private usuarioService: UsuarioService,
    private router: Router, private toastService: ToastService, private alertController: AlertController) { }

  ngOnInit() {
    this.menu.enable(true);
    this.usuarioService.getUsuarios().subscribe(res => this.usuarios = res);
  }
    ...
}

routes in app-routing.module.ts

...
const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
  { path: 'detalleCentro/:id', loadChildren: './pages/centro-detalle/centro-detalle.module#CentroDetallePageModule' },
  { path: 'detalleCentro', loadChildren: './pages/centro-detalle/centro-detalle.module#CentroDetallePageModule' },
  { path: 'centros', loadChildren: './pages/centro-listado/centro-listado.module#CentroListadoPageModule' },
  { path: 'usuarios', loadChildren: './pages/usuario-listado/usuario-listado.module#UsuarioListadoPageModule' },
  { path: 'detalleUsuario/:id', loadChildren: './pages/usuario-detalle/usuario-detalle.module#UsuarioDetallePageModule' },
  { path: 'detalleUsuario', loadChildren: './pages/usuario-detalle/usuario-detalle.module#UsuarioDetallePageModule' }
];

Menu html

...
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
...

Menu items

...
public appPages = [
    {
      title: 'Fichaje',
      url: '/fichaje',
      icon: 'create'
    },
    {
      title: 'Perfil',
      url: '/detalleUsuario/:id',
      icon: 'person'
    },
    {
      title: 'Usuarios',
      url: '/usuarios',
      icon: 'people'
    },
    {
      title: 'Centros',
      url: '/centros',
      icon: 'home'
    }
  ];
...

I expect show correctly the listings when you navigate between pages Sorry, but I can´t post images: You need at least 10 reputation to post images.

Ad

Answer

ngOnInit is only called once, when the component is created. Since ionic-routing use a "stacked"-navigation the components are not destroyed if you change the route. So ngOnInit never get called again. You should try the ionic-lifecycle-hook: ionViewDidEnter

ionViewDidEnter() {
    this.menu.enable(true);
    this.usuarios$ = this.usuarioService.getUsuarios()
}

also you shouldn't manually subscribe to avoid a memory-leak. I changed this.usuarios to this.usuarios$ (Observable), so you have to use async pipe in your template:

{{ usuarios$ | asnyc }}
Ad
source: stackoverflow.com
Ad