Angular组件未从服务加载数据[重复]

Question

我正在尝试从服务加载一些数据，该服务在我在控制台中测试它时工作，它正确显示所需的数组，但是当从我的组件调用服务的相同方法时（我需要渲染数据）它只是在控制台中显示 [object Object].... 而在组件本身上没有任何内容。

仅供参考：正在使用的提供程序（'/api/departement'）正常工作，因为数据可以显示在控制台中（来自服务本身的数据）。

这是我的代码：

Department.ts：

export class Departement{
public code_dep:String;
public lib_dep_AR:String;
public lib_dep_FR:String;
public countm:number;
}

Departement.service.ts

import { Departement}  from './departement';
import { Http,Headers } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Injectable } from '@angular/core';
@Injectable()
export class DepartementService{

constructor(private http:Http){}
private headers = new Headers({'Content-type':'application/json'});
private depUrl = '/api/departement';

getAllDeps():Promise<Departement[]>{

    return this.http.get(this.depUrl + "/allDeparts").toPromise().
    then(response=>response.json() as Departement[]);  

  }
// etc
}

displaying.component.ts

  export class Displaying implements OnInit {
  departements:Departement[];
  departement:Departement;
  constructor(public depserv:DepartementService,public router:Router) {

   }

  ngOnInit() {
    this.depserv.getAllDeps().then(dep =>    
      {    this.departements = dep;
       });

    //etc  
  }

我想在哪里渲染结果

<select name="budget" >     
 <option>my results down here</option>            
 <option *ngFor="let x of departements">{{x.lib_dep_FR}}</option>
</select>

通过转到 Observable 界面修复

Department.service.ts

private extractData(res:Response) {
    let body = res.json();
    return body || [];
}
getData():Observable<Departement[]>{
    return this.http.get(this.depUrl+"/allDeparts").map(this.extractData).catch(this.handleError);
}

在 display.component.ts 中赶上结果

ngOnInit(){
    this.depserv.getData().subscribe(
   dept => this.departements = dept);
}

Answer 1

在displaying.component.ts 文件中而不是这个this.departements = dep; 更改为这个this.departements = dep.json(); 并检查你在console.log(this.departements) 中得到了什么如果你得到对象数组或值数组，那么数据将来自x.lib_dep_FR