<ion-segment> pre-populate data


#1

I have created 2 segments on my page using .Each segment displays the data once i click on . Data gets populated with help of the code present inside my constructor.
By default when i reach on this page, it is completely blank and data only gets loaded once i click on the segment button. Is there any way to populate the data of default segment as soon as i reach on this page?


#2

Could you please show us your template and typescript code? Little bit hard to tell without it. If I have to guess I think you might haven’t set any default value to your segments to bind to.


#3

Hi lukkschoen…here you go…

HTML Code:

<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>Messages Board</ion-title>
    </ion-navbar>
</ion-header>
<ion-content #content padding class="MessagePage">
    <ion-segment [(ngModel)]="messageslist" color="primary">
    <ion-segment-button value="messageboard">
      Message Board
    </ion-segment-button>
    <ion-segment-button value="privatemessages">
      My Messages
    </ion-segment-button>
  </ion-segment>
  <div [ngSwitch]="messageslist">
  <ion-list *ngSwitchCase="'messageboard'">
      <div text-center class="no-data" *ngIf="(messages | async)?.length==0">You have not added any message yet. Please click on "+" icon to start.</div>
        <ion-item class="unread" *ngFor="let message of messages | async">
            <header>
                <div class="sender-info">
                    <span class="subject"><i>{{ message.messagetitle }}</i></span>
                    <span class="from">{{ message.fullname }}</span>
                </div>
                <span class="time">{{ message.senttime | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
            </header>
            <main>
                {{message.description}}
            </main>
        </ion-item>
          </ion-list>
          <ion-list *ngSwitchCase="'privatemessages'">
              <div text-center class="no-data" *ngIf="(personalmessages | async)?.length==0">You have not added any message yet. Please click on "+" icon to start.</div>
        <ion-item class="unread" *ngFor="let item of personalmessages | async">
            <header>
                <div class="sender-info">
                    <span class="subject"><i>{{ item.messagetitle }}</i></span>
                    <span class="from">Sent By: {{ item.sentby }}</span>
                </div>
                <span class="time">{{ item.senttime | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
            </header>
            <main>
                {{item.description}}
            </main>
        </ion-item>
          </ion-list>
  </div>
          <ion-fab *ngIf="role=='admin' || role=='teacher'" clear small right bottom>
        <button ion-fab (click)="SendMessage()">
            <ion-icon name="md-paper-plane"></ion-icon>
        </button>
    </ion-fab>
</ion-content>>

TS File:

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';
import {Observable} from 'rxjs/Observable';
import { UserData } from '../../../providers/user-data';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2';

/*
  Generated class for the Messageboard page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-messageboard',
  templateUrl: 'messageboard.html',
  queries: {
    content: new ViewChild('content')
  }
})
export class MessageboardPage {
	messages: FirebaseListObservable<any[]>;
  classid : any;
  fullname: any;
  messagetitle: any;
  description: any;
  content: any;
  role: any;
  userid: any;
  personalmessages: FirebaseListObservable<any[]>;
  messagelist: string = "messageboard";
  constructor(
    public navCtrl: NavController,
    public userData: UserData,
    public navParams: NavParams,
    public alertController: AlertController,
    public af: AngularFire
  ){
    this.classid=this.navParams.data;
    console.log("Class ID==>" +this.classid);
    this.messages = this.userData.getAllMessagesByClassID(this.classid);
    this.userid = this.userData.uid;
    console.log("User ID==>" +this.userid);
    this.personalmessages = this.userData.getAllMessagesForUser(this.userid);
    console.log("Personal Messages==>" +this.personalmessages);
    
    this.userData.myRole$.subscribe( data => {
      this.role = data;
    });
  }

  ionViewDidLoad() {
    console.log( " -> " + this.userData.role );
    console.log('Hello MessageBoard Page');
    this.userData.dismissLoadingController();

  }
  
  SendMessage(): void {
    let alert = this.alertController.create({
                  title: 'Enter message details',
                  inputs :[
                  {
                    name: 'messagetitle',
                    placeholder: 'Enter message title'
                  },
                  {
                    name: 'description',
                    placeholder: 'Description'
                  }
                  ],
                  buttons: [
                  {
                    text: "Cancel",
        handler: data=> {
          console.log("Cancel Clicked")
        }},
        {
          text: "Save",
        handler: data=> {
this.messages.push ({
  messagetitle: data.messagetitle,
  description: data.description,
  classid: this.classid,
  schoolid: this.userData.schoolid,
  senttime: firebase.database['ServerValue']['TIMESTAMP'],
  sentby: this.userData.uid
})
      }
    }
                  ]
                });
                alert.present();
 }

 public ionViewDidEnter(){
    this.content.scrollToBottom(300);
}


}

#4

Inside your typescript you have this:
messagelist: string = "messageboard";

this should be the same as this:

<div [ngSwitch]="messageslist">

Notice the difference? Missing a letter S on the messagelist declaration.


#5

wow…such a silly mistake. Thanks for pointing this out.

Have a great day ahead…


#6

No problem. Sometimes it’s good to have a fresh pair of eyes looking at your code.