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

Question

我试图从一个服务加载一些数据，该服务在控制台中测试时工作，它正确地显示了所需的数组，但当从我的组件调用服务的相同方法时（我需要呈现数据），它只显示[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
}

显示.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  
  }

我想在那里呈现结果

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

通过移动到可观察界面进行修复

服务部

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

赶上displaying.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