Question

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

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

这是我的代码：

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  
  }

我想要渲染结果

＆＃13;

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

＆＃13;

通过转到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

在myapp文件而不是displaying.component.ts更改此this.departements = dep;，只需检查您在this.departements = dep.json();中获得的内容如果您要获取对象数组或值数组然后数据将来console.log(this.departements)

Angular组件未从服务加载数据

1 个答案: