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

Posted 2023-02-22

【中文标题】Angular组件未从服务加载数据[重复]

【英文标题】：Angular component not loading data from service [duplicate]

【发布时间】：2018-08-01 01:10:44

【问题描述】：

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

【问题讨论】：

console.log(this.deparments) 在组件内显示什么

它显示“未定义”:(@Sajeetharan

当我尝试 this.depserv.getAllDeps().then(Departement => this.departements = Departement; console.log("data : "+Departement); );它显示数据：[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

添加 JSON.stringify(console.log(this.deparments));并发布结果

结果相同，未定义

【参考方案1】：

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

【讨论】：

.getAllDeps() 方法已经返回一个数组 "Promise : Department[]" ，所以在组件中获取时我不能使用 dep.json()

在 display.component.ts 文件中，您是否在 dep 中获取数据？？

是的，我得到了：数据：[object Object]，[object Object]，[object Object]，[object Object]，[object Object]，[object Object]

@YassineBenHamida 上面你告诉过你没有定义

因为你没有 JSON。你有一个数组：[]。 JSON 是 javascript 对象的字符串表示形式。您可以使用 JSON.stringify 方法从现有对象生成 JSON 字符串：.更改为 this.departements =JSON.stringify(dep);现在检查你在 console.log(this.departements) 中得到了什么