Question

我有home.ts，它正在调用service.ts来从Storage中加载项目。

export class HomePage {

  products;

  ionViewDidEnter() {
    this.products = this.productService.products;
  }

  ngOnInit(){
      this.productService.fetchProducts();                                    
      this.products = this.productService.products;
  }
}

export class ProductService{ 

  products;

  fetchProducts(){    
    this.storage.get('products') // returns a promise which returns data or error    
      .then(
        (products) => {
        // assign to this.expenses only if not null. When first //strt, can be null. If null, assign empty array []
          products? this.products = products : this.products = [];                                            
          console.log("fetch Products:" + this.products);
          return this.products;
      })  
      .catch(
        err => console.log(err)
      );          
  }

然后我在home.html中渲染项目。问题是，应用程序启动时第一次不显示项目。但是，如果我导航到另一个屏幕并返回home.ts，那么这些项目将被渲染回来。我知道这是因为ionViewDidEnter，也许是第一次，fetchProducts中的promise是异步的。但是如何在ngOnInit上第一次列出要列出的项目？

Answer 1

处理异步问题的一种方法是在回调中执行操作：

ngOnInit(){
      this.productService.fetchProducts()
        .then((res)=>{
          this.products = this.productService.products;
        });                              
}

您还应在此处添加return语句：

fetchProducts(){    
    return this.storage.get('products') // returns a promise which returns data or error    
      .then(..

以下是一个有关的例子：http://plnkr.co/edit/ONOg4FChJpCG81gM7Vlt?p=preview

Answer 2

如我所见，你可以用两种不同的方式做到这一点......

首先修改方法，以便typescript知道它返回一个带有产品列表的promise：

fetchProducts(): Promise<Array<any>> {
  // ...
}

1）预加载一次信息：所以你只需要调用一次fetchProducts方法（可能是在启动时），以便将产品加载到内存中，然后你就可以了使用products属性获取数据

// In your app.component.ts
@Component({
    templateUrl: 'app.html'
})
export class MyApp {

    public rootPage: any; // Don't assign the page here yet

    constructor(private platform: Platform,
                private productService: ProductService) {
        this.platform.ready().then(() => {
            // ...

            this.productService.fetchProducts().then(() => {
                this.rootPage = HomePage;
            });
        });
    }

然后在HomePage中，由于数据已经在内存中，您可以使用服务中的products属性：

export class HomePage {

  products;

  ionViewDidEnter() {
    this.products = this.productService.products;
  }

}

2）每次用户进入主页时从存储中获取产品：

    export class HomePage {

      products;

      ionViewDidEnter() {
        this.productService.fetchProducts().then((products) => {
          this.products = this.productService.products;
        });   
      }

    }

Ionic 2在ngOnInit中从Promise加载项目

2 个答案: