Ion-list empty after opening a different page or segment

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 []="">
              <h2>{{ }}</h2>

        <ion-list *ngSwitchWhen="'all'">
          some cards here...


    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 ='android');

    ngOnInit():void {
        this.teams = this.service.items$;


export class TeamProvider extends ApiService<Team> {
    constructor(public http:AuthHttp) {
        super(http, 'me/teams');


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) {
        this.dataStore = {items: [], count:0};
        this._items$ = <Subject<T[]>>new Subject();

    get items$():Observable<T[]> {
        return this._items$.asObservable();

    load() {
            .map(response => response.json())
            .map(response => this.deserialize(response))
            .subscribe(data => {
                this.dataStore.items = data;
         }, 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.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.


@rapropos @bengtler @brandyshea