英文:
How to use API in app.service.ts in Angular an use its data in the app components
问题
I am writing a servise.ts in which used API .But when I want to use its data in a component it's undefined.
I used all dependencies
app.component.ts:
constructor(private DATA: DataInfoService){}
this.DATA.ApiService()
this.Informations = this.DATA.Informations;
And
DataInfoService.ts:
@Injectable({
providedIn: 'root'
})...
constructor(private http: HttpClient) { }
public ApiService(info: INFO): any {
var headers = info.headers;
this.http.post<any>(APIAddress, info.postData, { headers }).subscribe(data => {
this.Informations = data
})
}
英文:
I am writing a servise.ts in which used API .But when I want to use its data in a component it's undefined.
I used all dependencies
app.component.ts:
constructor(private DATA: DataInfoService){}
this.DATA.ApiService()
this.Informations = this.DATA.Informations;
And
DataInfoService.ts:
@Injectable({
providedIn: 'root'
})...
constructor(private http: HttpClient) { }
public ApiService(info: INFO): any {
var headers = info.headers;
this.http.post<any>(APIAddress, info.postData, { headers }).subscribe(data => {
this.Informations = data
})
}
答案1
得分: 1
有两种方法可以使用app.service.ts:
- 作为可观察对象使用
api.service.ts
@Injectable({
providedIn: 'root'
})
...
constructor(private http: HttpClient) { }
public ApiService(info: INFO): any {
var headers = info.headers;
return this.http.post<any>(APIAddress, info.postData, { headers })
}
app.component.ts:
constructor(private DATA: DataInfoService){}
ngOnInit(){
this.DATA.ApiService().subscribe((response) => {
console.log("Response:", response)
}, (error) => {})
}
- 作为Promise使用
api.service.ts
@Injectable({
providedIn: 'root'
})
...
constructor(private http: HttpClient) { }
public ApiService(info: INFO): any {
var headers = info.headers;
return new Promise((resolve, reject) => {
this.http.post<any>(APIAddress, info.postData, { headers
}).subscribe((response) => {
resolve(response)
}, (error) => {
reject(error);
})
})
}
app.component.ts:
constructor(private DATA: DataInfoService){}
ngOnInit(){
this.DATA.ApiService().then((response) => {
console.log("Response:", response)
}).catch((error) => {})
}
英文:
There are two ways to use app.service.ts
- Using as observable
api.service.ts
@Injectable({
providedIn: 'root'
})...
constructor(private http: HttpClient) { }
public ApiService(info: INFO): any {
var headers = info.headers;
return this.http.post<any>(APIAddress, info.postData, { headers })
}
app.component.ts:
constructor(private DATA: DataInfoService){}
ngOnInit(){
this.DATA.ApiService().subscribe((response) => {
console.log("Response:", response)
}, (error) => {})
}
- Using as promise
api.service.ts
@Injectable({
providedIn: 'root'
})...
constructor(private http: HttpClient) { }
public ApiService(info: INFO): any {
var headers = info.headers;
return new Promise((resolve, reject) => {
this.http.post<any>(APIAddress, info.postData, { headers
}).subscribe((response) => {
resolve(response)
}, (error) => {
reject(error);
})
})
}
app.component.ts:
constructor(private DATA: DataInfoService){}
ngOnInit(){
this.DATA.ApiService().then((response) => {
console.log("Response:", response)
}).catch((error) => {})
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论