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已在服务中定义，但您希望它在组件中使用。实际上，您需要从服务的subscribe调用实现中删除http部分，然后将其移动到组件中。

<强> 服务

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和upper， Http 已被弃用，您可以阅读 HttpClient

Answer 2

您将数据存储在服务范围内。您需要将该数据返回到组件，在组件内部进行订阅并将其存储在该组件内的局部变量中，请参阅下面的

服务

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中完成。

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

2 个答案: