无法将来自服务方法的数据显示到组件中

Question

仍在处理我的 Angular 5 - PHP 项目。

我想将我所有的 http 方法放在一个名为 api 的文件中，然后只需将它导入所需的组件即可调用我想要的任何方法。不知道这样工作好不好

无论如何，这是我的 service 叫 api.ts:

import {Injectable} from '@angular/core';
import { Http, Response } from '@angular/http';

@Injectable()
export class Api{
    public data: any = [];
    constructor(private http: Http){ }

    getPartnersName(){
        this.http.get('http://aff.local/getPartners.php').subscribe(
        (response: Response) =>{
          this.data = response.json();
          console.log(this.data);
          //this.keys.push(this.data);
        },
        error =>{
          console.log(error);
        }
      )
    }
}

我在 app.module.ts 中导入了它：

...//imports
...//Other imports
import { Api } from '../api/api';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [Api],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后我将它注入到我的组件中：

constructor(private fb: FormBuilder, private api: Api){

}

这里是api: Api。

现在，我调用了我想在里面使用的方法ngOnInit():

ngOnInit(){
    this.api.getPartnersName();
}

问题是我在控制台正确地看到了数据：

但无法在屏幕上显示：

<div class="row center-block">
    <div class="col-sm-4" *ngFor="let datas of data;">
      {{datas.partner_name}}
    </div>
</div>

Answer 1

您的 data 是在服务中定义的，但您希望它在组件中使用。实际上，您需要从服务的 http 调用实现中删除 subscribe 部分并将其移动到组件中。

服务

getPartnersName(){
    return this.http.get('http://aff.local/getPartners.php')
                    .map((response: Response) => response.json());      
}

组件

ngOnInit(){
    this.api.getPartnersName().subscribe(data => this.data = data);
}

另请注意，Angular 4.3 及更高版本，Http 已弃用，您可以阅读有关 HttpClient

Answer 2

您正在将您的数据存储在您的服务范围内。您需要 return 将该数据发送到组件，在组件内部订阅并将其存储在该组件内部的局部变量中，请参见下文

服务

import {Injectable} from '@angular/core';
import { Http, Response } from '@angular/http';

@Injectable()
export class Api{
    constructor(private http: Http){ }

    getPartnersName(){
        this.http.get('http://aff.local/getPartners.php').map(
        (response: Response) =>{
          return response.json();
        },
        error =>{
          console.log(error);
        }
      )
    }
}

组件

public data: any;

ngOnInit(){
    this.api.getPartnersName().
        subscribe((returnData: any) => {
            this.data = returnData;
        });
}

html

<div class="row center-block">
    <div class="col-sm-4" *ngFor="let datas of data;">
      {{datas.partner_name}}
    </div>
</div>

Angular 5 包含 HttpClient 而不是 Http，使用 HttpClient

您的服务将如下所示

import {Injectable} from '@angular/core';
import { HttpClient, Response } from '@angular/http';

@Injectable()
export class Api{
    constructor(private http: HttpClient){ }

    getPartnersName(){
        return this.http.get<any>('http://aff.local/getPartners.php');
    }
}

您的错误处理将在组件内的 subscribe 中完成。

无法将来自服务方法的数据显示到组件中

Can't display data coming from service method into component

angular

http

service

angular5

injectable