Angular Can'；t将来自服务方法的数据显示到组件中

仍然在做我的Angular 5-PHP项目

我希望将所有http方法放在一个名为api的文件中，并通过将其导入所需组件来调用任何方法。我不知道这样工作是否好

无论如何，这是我的

服务

，名为

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);
        }
      )
    }
}

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

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

我在app.module.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);
        }
      )
    }
}

...//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（）中使用的方法：

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


但无法在屏幕上显示它们：

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


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

服务

组件

还有一个注意事项，对于Angular 4.3及更高版本，Http已被弃用，您可以阅读有关HttpClient的信息，您的
数据在服务中定义，但您希望在组件中使用它。实际上，您需要从服务的
http
调用实现中删除
subscribe
部分，并将其移动到组件中

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');
    }
}

服务

组件

还有一点需要注意的是，对于Angular 4.3及更高版本，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');
    }
}

服务

组成部分

html


{{datas.partner_name}

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');
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/http'导入{HttpClient，Response}；
@可注射（）
导出类Api{
构造函数（私有http:HttpClient）{}
getPartnersName（）{
返回此.http.get（'http://aff.local/getPartners.php');
}
}

然后，您的错误处理将在组件内部的
订阅
中完成。
您正在服务范围内存储数据。您需要将该数据返回到组件，在组件内部订阅并将其存储在该组件内部的局部变量上，请参见下面的内容

服务

组成部分

html


{{datas.partner_name}

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');
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/http'导入{HttpClient，Response}；
@可注射（）
导出类Api{
构造函数（私有http:HttpClient）{}
getPartnersName（）{
返回此.http.get（'http://aff.local/getPartners.php');
}
}

然后，您的错误处理将在组件内部的
subscribe
中完成。
在这种情况下，
.subscribe
和
.map
之间有什么区别？subscribe是流的终点站-这样说。Map只是解析json并将值传递给下一个处理程序。所以在订阅中，你已经通过了响应，如果他有一个模型，他可以映射到模型<代码>获取（）当然可以，HttpClient（较新的抽象）还提供了此功能，并且您还可以省略
映射
部分。subscribe
表示：属性subscribe在类型void上不存在。在这种情况下，
与
之间有什么区别？subscribe是流的终点站-这样说。Map只是解析json并将值传递给下一个处理程序。所以在订阅中，你已经通过了响应，如果他有一个模型，他可以映射到模型<代码>获取（）是的，当然，HttpClient（较新的抽象）也提供了此功能，您还可以省略
映射
部分。我在
上有一个错误。subscribe
说：属性subscribe在type void上不存在
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');
    }
}