Angular 5 HttpClient GET：如果在构造函数中失败，则当 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() {
  }

失败的组件代码

ERROR MESSAGE: core.js:1448 ERROR TypeError: Cannot read property 'get' of undefined

@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

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

箭头函数

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

this绑定

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