Question

在Ionic / Angular项目中，我想从使用 self 变量引用 this 的ES5语法转移到箭头函数。

但是，箭头功能似乎不允许我在回调函数中访问 this 。

以下是使用箭头函数表示Promise（Ionic的LocalStorage）的然后情况的示例，这导致 this 未定义。

constructor(private storage: Storage) {
}

getItems() {
   this.storage.get('items').then((res) => {
      console.log(this);
})

我甚至找到了一个似乎完全相同的指南：Ionic Todo List

他的DataService：

getData() {
   return this.storage.get('todos'); 
}

他的成分：

  this.dataService.getData().then((todos) => {

      if(todos){
        this.items = todos;
      }
  });

正如我所说，使用虚拟变量非常有效：

   getItems() {
   let self = this;

   this.storage.get('items').then((res) => {
      console.log(self);
})

我对箭头功能的工作方式有一个基本的误解吗？感谢。

修改

根据要求，这是一个更完整的例子：

我的Ionic3 DataProvider：

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

@Injectable()
export class DataProvider {

  constructor(private storage: Storage) {
  }

  getItems() {
    return this.storage.get('items');
  }
}

我的Ionic3主页：

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { DataProvider } from '../../providers/data/data';

@IonicPage()
@Component({
   selector: 'page-home',
   templateUrl: 'home.html'
})
export class HomePage {

  items = [{
    title: 'Title',
    description: 'Description'
  }];

  constructor(public navCtrl: NavController,       
              private dataProvider: DataProvider) {

    let self = this;
    this.dataProvider.getItems()
      .then((items) => {
        # self works perfectly, but this is undefined
        console.log(self.items);
        console.log(this.items);

      if (items) {
        self.items = items;
      }
    })
    .catch((e) => {
        console.log(e);
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
  }
}

期望：这应该是平等的，但未定义

我希望这会有所帮助。感谢。

在ES6 / Typescript回调箭头函数中未定义此内容

0 个答案: