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
});
}
您需要更改传递给 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),
...
});
我正在尝试制作 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
});
}
您需要更改传递给 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),
...
});