ionic storage ngFor

Question

In my ionic app i use the ionic storage module. On A page i use an Ngfor to iterate over an object thats stored in the DB. I retrieve this object from my database service.

I get an error flow.getTaskFromCol is not a function. I think this is happening because the ngFor is running before the Object(in this case a Flow) is loaded. Does anybody know how i can prevent this from happening?

This is my code: Html:

<ion-content padding>

 <div *ngFor="let col of flow.columns;index as i">
    <h2>{{col}}</h2>
   <div *ngFor="let task of flow.getTasksFromCol(i)">
      <ion-card (swipe)="swipe($event,task)">
          <ion-item>
              <h2>{{task.title}}</h2>
            <button ion-button item-end clear icon-end> 
                <ion-icon name='more'></ion-icon>
              </button>
            <p>{{task.description}}</p>
          </ion-item>
        </ion-card>
   </div>
</div>

<ion-fab right bottom>
  <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
  <ion-fab-list side="left">
    <button (click)="createTask()" ion-fab><ion-icon name="add-circle"></ion-icon></button>
    <button ion-fab><ion-icon name="create"></ion-icon></button>
  </ion-fab-list>
</ion-fab>
</ion-content>

The component:

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Flow } from '../../model/Flow';
import { FlowService } from '../../model/services/flowService';
import {CreateTaskPage} from '../create-task/create-task'
import { Task } from '../../model/Task';

@IonicPage()
@Component({
  selector: 'page-flow',
  templateUrl: 'flow.html',
})
export class FlowPage {
  flow:Flow;

  constructor(public navCtrl: NavController, public navParams: NavParams,private flowService:FlowService,public modalCtrl: ModalController) {
    flowService.getFlows().then((flows:Map<number,Flow>)=>{
      this.flow = flows.get(Number(navParams.get("flowId")))
      console.log(this.flow)
    })

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FlowPage');

  }
  ionViewWillLoad(){

  }
  createTask(){
    const modal = this.modalCtrl.create(CreateTaskPage,{flowId:this.flow.flowId});
    modal.present();
  }
  swipe(e,task:Task){
    if(e.direction == 2){
      console.log("panUp");
      task.column--;
    }
    if(e.direction == 4){
      console.log("panDown");
      task.column++;
    }
  }

The DB service(simplified, there are more methods but they are currently not called):

import { Flow } from "../Flow";
import { Task } from "../Task";
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
const FLOWS_KEY = 'flowsKey'
@Injectable()
export class FlowService {

    constructor(private storage: Storage){

    }

      getFlows(){
          return this.storage.get(FLOWS_KEY);
      }

} 

This is the Flow model:

import { Task } from "./Task";

export class Flow {
    //PK for 1-n relation with task
    flowId:number;
    projectName:string;
    columns:string[];
    tasks: Map<number,Task>;

   constructor(flowId:number,projectName:string,columns:string[],tasks:Map<number,Task>){
    this.flowId = flowId;
    this.projectName = projectName;
    this.columns = columns;
    this.tasks = tasks;
   }

   public getTasks(){
    return Array.from(this.tasks.values())
}
    public getTasksFromCol(colNumber:number){
        var tasks = new Array<Task>();
        for(let task of Array.from(this.tasks.values())){
            if(task.column == colNumber){
                tasks.push(task)
            }
        }
        return tasks;
    }
}

I found the problem. i was returning a promise. This changes the way how things work. To solve my problem i changed my Service and my component. In my service i added this method:

 public getFlow(flowId:number){
       return this.storage.get(FLOWS_KEY).then((flows:Map<number,Flow>)=>{
           return flows.get(flowId);
       });
    }

my component now looks like this:

export class FlowPage {
  flow;

  constructor(public navCtrl: NavController, public navParams: NavParams,private flowService:FlowService,public modalCtrl: ModalController) {
    this.flow = this.flowService.getFlow(Number(this.navParams.get("flowId")))
  }
}

I now have a problem displaying the data on the screen. This is what i came up with for the html.

<ion-content padding>

 <div *ngFor="let col of flow.columns | async;index as i">
    <h2>{{(col | async)?.value}}</h2>
   <div *ngFor="let task of flow.getTasksFromCol(i) | async">
      <ion-card (swipe)="swipe($event,task)">
          <ion-item>
              <h2>{{(task | async)?.title}}</h2>
            <button ion-button item-end clear icon-end> 
                <ion-icon name='more'></ion-icon>
              </button>
            <p>{{(task | async)?.description}}</p>
          </ion-item>
        </ion-card>
   </div>
</div>

<ion-fab right bottom>
  <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
  <ion-fab-list side="left">
    <button (click)="createTask()" ion-fab><ion-icon name="add-circle"></ion-icon></button>
    <button ion-fab><ion-icon name="create"></ion-icon></button>
  </ion-fab-list>
</ion-fab>
</ion-content>