如何在Angular的app.service.ts中使用API并在应用程序组件中使用其数据。

huangapple go评论76阅读模式
英文:

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: &#39;root&#39;
})...
constructor(private http: HttpClient) { }
public ApiService(info: INFO): any {
    var headers = info.headers;
    this.http.post&lt;any&gt;(APIAddress, info.postData, { headers }).subscribe(data =&gt; { 
    this.Informations = data
 })
}

答案1

得分: 1

有两种方法可以使用app.service.ts:

  1. 作为可观察对象使用

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) => {})
}
  1. 作为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

  1. Using as observable

api.service.ts

@Injectable({
  providedIn: &#39;root&#39;
})...
constructor(private http: HttpClient) { }
public ApiService(info: INFO): any {
    var headers = info.headers;
    return this.http.post&lt;any&gt;(APIAddress, info.postData, { headers })
}


app.component.ts:

constructor(private DATA: DataInfoService){}

ngOnInit(){
  this.DATA.ApiService().subscribe((response) =&gt; {
     console.log(&quot;Response:&quot;, response)
  }, (error) =&gt; {})
}
  1. Using as promise

api.service.ts

@Injectable({
  providedIn: &#39;root&#39;
})...
constructor(private http: HttpClient) { }
public ApiService(info: INFO): any {
    var headers = info.headers;
    return new Promise((resolve, reject) =&gt; {
       this.http.post&lt;any&gt;(APIAddress, info.postData, { headers 
       }).subscribe((response) =&gt; {
          resolve(response)
       }, (error) =&gt; {
          reject(error);
       })
    })
}


app.component.ts:

constructor(private DATA: DataInfoService){}

ngOnInit(){
  this.DATA.ApiService().then((response) =&gt; {
     console.log(&quot;Response:&quot;, response)
  }).catch((error) =&gt; {})
}

huangapple
  • 本文由 发表于 2023年2月27日 13:13:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/75576956.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定