Variables lost when refreshing view

Ionic Framework ionic-v3
1

So… i am (obviously) pretty new to ionic / angular at all.

I got two views: a list of todolists; adding a new todolist to that list.
I can add a single new todolist object to the list. But if i want to add another one the list is gone. So the question is how i can save the objects in that list of todolists?

HTML to display the list of todolists: (todolist.html)

<ion-content padding>

  <button end ion-button (click)="launchAddtodolistPage();">
        Add todolist.
      </button>

    <ion-item *ngFor="let todo of todolistentries" (click)="launchTodoPage()">{{todo.title}}</ion-item>
  </ion-list>

</ion-content>

(todolist.ts)

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.addTodoListEntry();
  }
 addTodoListEntry() {
    let e = new TodoListEntry();
    e.title = this.navParams.get('title');
      if (e.title != null) {
      this.todolistentries.push(e);
    }
  }
  launchAddtodolistPage() {
    this.navCtrl.push(AddtodolistPage);
  }

(addTodolist.html)

</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label color="primary" floating>Title</ion-label>
      <ion-input [(ngModel)]="inputTitle"></ion-input>
    </ion-item>
    <ion-item>
      <ion-textarea [(ngModel)]="inputDescription" color="primary" floating placeholder="Description">Description</ion-textarea>
    </ion-item>
    <ion-item>
      <ion-label color="primary">Category</ion-label>
      <ion-select [(ngModel)]="category" multiple="false">
        <ion-option>Sports</ion-option>
        <ion-option>University</ion-option>
        <ion-option>Work</ion-option>
        <ion-option>Private</ion-option>        
      </ion-select>
    </ion-item>
    <ion-item>
        <ion-label color="primary">Priority</ion-label>
        <ion-select [(ngModel)]="priority" multiple="false">
          <ion-option>Low</ion-option>
          <ion-option>Medium</ion-option>
          <ion-option>High</ion-option>
        </ion-select>
      </ion-item>
  </ion-list>
  <button end ion-button (click)="newTodoEntry();">
    Add todolist to list.
  </button>
</ion-content>

(addTodolist.ts)

  newTodoEntry() {
    let e = new TodoListEntry();
    e.title = this.inputTitle;
    if (this.inputDescription != null) {
      e.description = this.inputDescription;
    }

    this.navCtrl.push(TodolistsPage, {
      title: e.title, description: e.description,
    });
  }
}

class TodoListEntry {
  title: String;
  description: String;
}
2

Several things:

Most importantly, move your data storage to a service provider that is injected by any page that needs it.

A reader of a function wants to know (1) what it does, (2) what it depends on, (3) what state it modifies, and (4) what it returns. addTodoListEntry() should take a parameter explicitly instead of rooting around in NavParams and it should have a declared return value type. As written, it doesn’t make sense as a separate method, because I can’t see how it would make sense to call it more than once.

It’s dangerous to explicitly compare against null in JavaScript. Much more robust to simply check for truthiness/falsiness.

I don’t see a benefit to making TodoListEntry a class instead of an interface.

3

Thank you for your advises! I wanted to start with the data storage. I have to admit that i didnt really understood what you meant with the service provider. So i googled and started using Storage (https://ionicframework.com/docs/storage/). But somehow it still doesn’t work.

It still adds the entry into the list but somehow i cant store the list. Guess I am doing it the wrong way?

addTodoListEntry() {
    if(this.todolistentries.length>0){
    this.storage.get('todolistentries');
    }
    let e = new TodoListEntry();
    e.title = this.navParams.get('title');
      if (e.title != null) {
      this.todolistentries.push(e);
    }
    this.storage.set('todolistentries', this.todolistentries);
  }

Im not sure, but maybe you cant store lists of objects in storages? Really curious why its not working.
Kind regards

4

You are calling a function named get, yet ignoring its return value.

5

Oops! So i tried

addTodoListEntry() {
    console.log("first: "+this.todolistentries.length);
    if(this.todolistentries.length>0){
      this.storage.get('todolistentries').then((todolistentries) => {
        this.todolistentries = todolistentries;
      });
    }
    let e = new TodoListEntry();
    e.title = this.navParams.get('title');
      if (e.title != null) {
      this.todolistentries.push(e);
    }
    this.storage.set('todolistentries', this.todolistentries);
    console.log("second: "+this.todolistentries.length);
  }

Also tried this.todolistentries = this.storage.get('todolistentries')

I am not sure, but i am not sure if theres only one list existing. Maybe the list is initialising everytime i am running any method from TodolistsPage? Maybe its because push is creating a new view every time?