离子异步NGFOR数据

Question

底部更新

我正在尝试在一个 *ngfor中显示数据，该数据是我从离子存储中异步检索的对象中获得的。目前，我正在获得空白屏幕。

我尝试了多种事情，例如以不同的方式使用异步管。有人知道正确的方式吗？

这是我的存储服务方法，它被称为：

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

这是我的组件代码：

import { Component, OnInit } 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;
  constructor(public navCtrl: NavController, public navParams: NavParams,private flowService:FlowService,public modalCtrl: ModalController) {
    this.flow = this.flowService.getFlow(Number(this.navParams.get("flowId")))
  }
  ngOnInit(): void {
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad FlowPage');
  }
  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++;
    }
  }
}

我的html：

<ion-content padding>
<div *ngIf="(flow | async)">
 <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}}</h2>
            <button ion-button item-end clear icon-end> 
                <ion-icon name='more'></ion-icon>
              </button>
            <p>{{task}}</p>
          </ion-item>
        </ion-card>
   </div>
</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>

感谢您的帮助。

更新：

我在组件中发现了一个大错误，现在看起来像这样：

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

我还更新了我的HTML，但它仍然无法正常工作：我现在有错误：

错误typeerror：_co.flow.getTaskSssfromcol不是函数 在object.eval [AS UpdatedIrectives]

这很奇怪，因为此方法存在于我的流模型中：

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;
    }
}

update2 我现在将其添加到我的服务

public getTasksFromCol(flowId:number,colNumber:number){
        return this.storage.get(FLOWS_KEY).then((flows:Map<number,Flow>)=>{
           var flow:Flow = flows.get(flowId);
           var tasks = new Array<Task>();
           for(let task of Array.from(flow.tasks.values())){
               if(task.column == colNumber){
                   tasks.push(task)
               }
           }
           return tasks;
        });
    }

我只是在我的HTML页面中调用它吗？我有点卡住

Answer 1

我发现了你的错误。

您创建了一个变量。

flow:Flow;

您已将值分配给该变量。

this.flow = flow;

现在，您需要了解变量包含与您分配的值相关的一些值。因此，您无法访问 flow.getTaskssfromcol（）

那是您遇到此错误的原因。

错误typeerror：_co.flow.getTaskSfromcol不是object.eval [as fimepatedirectives]

的函数

解决方案： -

只需将此getTasksfromcol（）方法移动到服务并像以下那样应用HTML，

我希望它可以正常工作。让我尝试一次，让我知道是否有任何错误。