Every time I go to the results component, the service inside ngOnInit behaves as expected. However, when I open the side menu, navigate to another page, and then return to the results page, the page fails to render the results. Instead, the ng-template is displayed. There are no errors in the console, nothing at all. The ngOnInit function is working fine; it displays the console.log('init'). But for some reason, the service call doesn't work. I've tried putting the service call inside the constructor or a separate function, but it still doesn't work. I even tested using NgZone, but that didn't help either.
It's worth noting that if I press F5 directly on the Results page, everything works perfectly. It's only when I navigate to it using
this.router.navigate(['/resultados']);This is the Results component:
import { Component, OnInit, NgZone } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { NavService } from '../shared/nav.service';
import {AngularFirestore} from 'angularfire2/firestore';
import {firestoreService} from '../shared/firestore.service';
import {Usuario} from '../../models/usuario'
@Component({
selector: 'resultados',
templateUrl: 'resultados.component.html'
})
export class ResultadosComponent implements OnInit {
servId:any;
users: Usuario[];
constructor(
private fService: firestoreService,
private service:NavService,
private router: Router,
private zone: NgZone
) { }
ngOnInit() {
console.log('init')
this.fService.getUsers().subscribe(users=>{
this.zone.run(()=>{
this.users = users;
})
})
}
}
This is the Results HTML:
<div class="resultados" *ngIf="users?.length > 0;else noUsers">
<ul *ngFor="let user of users">
<li>{{user.uid}}</li>
</ul>
</div>
<ng-template #noUsers>
<hr>
<h5>Nenhum usuário cadastrado</h5>
</ng-template>
This is the firestore.service:
import { Injectable } from '@angular/core';
import {AngularFirestore, AngularFirestoreCollection,
AngularFirestoreDocument} from 'angularfire2/firestore';
import {Usuario} from '../../models/usuario'
import {Observable} from 'rxjs/Observable';
@Injectable()
export class firestoreService {
usersCollection: AngularFirestoreCollection<Usuario>;
users:Observable<Usuario[]>;
constructor(public afs:AngularFirestore){
this.users = this.afs.collection('users').valueChanges();
}
getUsers(){
return this.users;
}
}