1

仍在处理我的 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>
4

2 回答 2

3

您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 及更高版本，不推荐使用Http，您可以阅读有关HttpClient的信息

于 2018-01-16T06:34:55.903 回答
1

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

服务

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组件内部完成。

于 2018-01-16T06:39:57.723 回答