I have a list of items which are displayed via ngFor, initial page load works fine, even going to different modals on top of it works. But as soon i change the root page, the data is null on the template page. So let the code speak.
html template
<div [ngSwitch]="segment">
<ion-list #teamsList *ngSwitchWhen="'my'">
<ion-item-sliding *ngFor="let team of teams | async" #slidingItem [attr.team-id]="team.id">
<h2>{{ team.name }}</h2>
</ion-item-sliding>
</ion-list>
<ion-list *ngSwitchWhen="'all'">
some cards here...
...........
Team.Page
@Component({
templateUrl: 'build/pages/teams/list/teams.list.html',
/// provider is set in ionicBootstrap()
})
export class TeamsListPage implements OnInit {
@ViewChild('teamsList', {read: List}) teamsList:List;
isAndroid:boolean = false;
segment:string = "my";
public teams:Observable<Team[]>;
static get parameters() {
return [[AuthService], [TeamProvider], [NavController], [Platform]];
}
constructor(private auth, private service, private nav, platform) {
this.isAndroid = platform.is('android');
}
ngOnInit():void {
this.service.load();
this.teams = this.service.items$;
}
}
TeamProvider.ts
@Injectable()
export class TeamProvider extends ApiService<Team> {
constructor(public http:AuthHttp) {
super(http, 'me/teams');
}
}
ApiService.ts
export abstract class ApiService<T extends GenericMayHaveId> extends ApiHelper {
private _items$:Subject<T[]>;
protected dataStore:{items:T[], count:number};
protected baseUrl:string;
constructor(public auth:AuthHttp, public endpoint:string) {
super();
this.dataStore = {items: [], count:0};
this._items$ = <Subject<T[]>>new Subject();
}
get items$():Observable<T[]> {
return this._items$.asObservable();
}
load() {
this.auth.get(`${this.baseUrl}/${this.endpoint}/`)
.map(response => response.json())
.map(response => this.deserialize(response))
.subscribe(data => {
this.dataStore.items = data;
this._items$.next(this.dataStore.items);
}, err => this.handleError(err));
}
}
Everything works fine, until i move away from tabs page OR when i click on the different segment, the async data is lost after return to the teams segment.
The temporary fix for the segments is if i remove the async pipe and changing the Team.Page function to the following,
ngOnInit():void {
this.service.load();
//this.teams = this.service.items$;
// remove async pipe from template as well.
this.service.items$.subscribe(data => {
this.teams = data;
});
}
and the temporary fix for setRoot is to add a provider in the Team.Page component instead of using it globally.
I am confused whats going wrong, any help would be appreciated.
Thanks