Angular 5 HttpClient GET:如果在 ngOnInit 时在构造函数中失败,则成功

Angular 5 HttpClient GET: SUCCESSFUL if in constructor FAILS when ngOnInit

我正在尝试制作 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() {
  }

组件代码失败

错误消息:core.js:1448 错误类型错误:无法读取未定义的 属性 '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
    });

  }

您需要更改传递给 CustomStoreloadinsertremoveupdate 属性以使用箭头函数(或绑定this 对它们的引用)以便使用 this 引用。这些方法是独立的,不附加到对象,因此没有 this 对它们的引用。建议在 this 绑定上使用新的箭头函数,以防您传递方法的代码将新的 this 绑定到它。

箭头函数

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

this绑定

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