Angular 5 HttpClient GET：如果在构造函数FAILS中ngOnInit时成功

Question

我正在尝试创建一个http.get。

当代码在构造函数中时它工作成功但是当我将代码移动到ngOnInit区域时它失败了。

有没有办法在构造函数外部使用代码？

我通常接受我会提供服务，并尝试在这个PLNKR，但它失败的https://embed.plnkr.co/JMTfJWLsz7pHzauhnAoM/

工作组件代码

@Component({
  selector: 'ngx-refrate-member',
  templateUrl: './refrate-member.component.html',
  providers: [FetchDataEditService2],
})

export class RefRateMemberComponent {
  dataSource: any = {};
  editing = {};
  private url: string = 'refratemember';

  constructor(private http: HttpClient, private _MasterService: FetchDataEditService2) {

    const API_URL = 'https://js.devexpress.com/Demos/WidgetsGallery/data/orderItems';

    this.editing = this._MasterService.editObject(this.url);

    var myStore = new CustomStore({
      load: function (loadOptions: any) {

        var params = '?';
        params += 'skip=' + loadOptions.skip || 0;
        params += '&take=' + loadOptions.take || 10;

        var thePageNumber = 'pageNumber=' + ((loadOptions.skip / loadOptions.take) + 1);

        if (loadOptions.sort) {
          params += '&orderby=' + loadOptions.sort[0].selector;
          if (loadOptions.sort[0].desc) {
            params += ' desc';
          }
        }
        return http.get(API_URL + params)
          .toPromise()
          .then((res: any) => {
            return {
              data: res.items,
              totalCount: res.totalCount
            }
          })
          .catch(error => { throw 'Data Loading Error' });
      },
      insert: function (values) {
        return http.post(API_URL, values)
          .toPromise();
      },
      remove: function (key) {
        return http.delete(API_URL + encodeURIComponent(key))
          .toPromise();
      },
      update: function (key, values) {
        return http.put(API_URL + encodeURIComponent(key), values)
          .toPromise();
      }
    });

    this.dataSource = new DataSource({
      store: myStore
    });
  }

  ngOnInit() {
  }

FAILING组件代码

错误消息：core.js：1448 ERROR TypeError：无法读取未定义的属性'get'

@Component({
  selector: 'ngx-refrate-member',
  templateUrl: './refrate-member.component.html',
  providers: [FetchDataEditService2],
})

export class RefRateMemberComponent {
  dataSource: any = {};
  editing = {};
  private url: string = 'refratemember';

  constructor(private http: HttpClient, private _MasterService: FetchDataEditService2) {
  }

  ngOnInit() {
    const API_URL = 'https://js.devexpress.com/Demos/WidgetsGallery/data/orderItems';

    this.editing = this._MasterService.editObject(this.url);

    var myStore = new CustomStore({
      load: function (loadOptions: any) {

        var params = '?';
        params += 'skip=' + loadOptions.skip || 0;
        params += '&take=' + loadOptions.take || 10;

        var thePageNumber = 'pageNumber=' + ((loadOptions.skip / loadOptions.take) + 1);

        if (loadOptions.sort) {
          params += '&orderby=' + loadOptions.sort[0].selector;
          if (loadOptions.sort[0].desc) {
            params += ' desc';
          }
        }
        return this.http.get(API_URL + params)
          .toPromise()
          .then((res: any) => {
            return {
              data: res.items,
              totalCount: res.totalCount
            }
          })
          .catch(error => { throw 'Data Loading Error' });
      },
      insert: function (values) {
        return this.http.post(API_URL, values)
          .toPromise();
      },
      remove: function (key) {
        return this.http.delete(API_URL + encodeURIComponent(key))
          .toPromise();
      },
      update: function (key, values) {
        return this.http.put(API_URL + encodeURIComponent(key), values)
          .toPromise();
      }
    });

    this.dataSource = new DataSource({
      store: myStore
    });

  }

Answer 1

您需要更改传递到load的insert，remove，update和CustomStore属性以使用箭头函数（或绑定this引用它们）以使用this参考。这些方法是独立的，不附加到对象，因此没有this参考。如果您传递方法的代码将新的this绑定到它，建议使用this绑定的新箭头函数。

Arrow Function

var myStore = new CustomStore({
    load: (loadOptions: any) => {
        ...
    },
    ...
});

this Binding

var myStore = new CustomStore({
    load: function(loadOptions: any) {
        ...
    }.bind(this),
    ...
});