如何在Angular 4中打印Angular对象

Question

如何打印JSON值，我像angular一样很基础，请有人帮助我。 test.html

{{ projects }}
<li *ngFor="let obj of projects">{{obj | json }}</li>

服务.ts

getProjects(): Promise<Addtimesheet[]> {
    return this.http.get("http://192.168.1.90/EMS/api/TimeSheetAPI/getProjects")
      .toPromise()
      .then(this.extractData)
      .catch(this.handleError);
  }
  private extractData(res: Response) {
    let body = res.json();
    console.log("Sdfsdfsdfsd sss");
    console.log(body);
    return body;
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }

组件.ts

import { Component, OnInit } from '@angular/core';
import { Addtimesheet } from './addtimesheet';

import { TimesheetService } from './timesheet.service';

import { Projects } from './projects';

@Component({
  selector: 'app-timesheet',
  templateUrl: './timesheet.component.html',
  styleUrls: ['./timesheet.component.css'],
  providers: [TimesheetService]
})
export class TimesheetComponent implements OnInit {

  timesheet = {};
  today: any;

  private projects: Projects[] = [];
  private errorMessage: any = '';

  constructor(private timesheetService: TimesheetService) { 
  }

  ngOnInit() {
    this.timesheetService.getProjects()
    .then(projects => this.projects = projects)
    console.log(this.timesheetService.getProjects());
  }
}

JSON 值

[
    "AESEMS",
    "ChainDrive",
    "CICAND",
    "CICAPI",
    "CICiOS",
    "CICWeb",
    "KC_APPTV",
    "KCMagento",
    "RDLSWeb",
    "Riddles",
    "TB",
    "TBAND",
    "TBiOS",
    "TestProject"
]

我尝试过，出现错误：ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor只支持绑定可迭代对象（例如数组）。

显示这种错误。

- Sastha

---

请展示整个 component.ts 文件。 - szmitas

@szmitas 更新了 component.ts - Sastha

也许后端意外地没有发送一个 Promise：在你的服务中，extractData 方法中，Array.isArray(body) 是什么意思？此外，也许是你的客户端在捣乱。你在服务中使用的是 HttpClient 还是 Http？如果是 HttpClient，它应该已经给你 JSON（尽管在你的代码中看起来并不像）。 - Zlatko

你确定你的服务返回的是一个数组吗？ - Ulrich Dohou

听起来你好像没有得到一个数组。请检查开发工具中的响应选项卡，将其复制粘贴到你的问题中 :) - AT82

Answer 1

打印JSON:

<pre> 
  <code>
     {{ obj | json }}
  </code>
</pre>

或将其打印到控制台上：

console.log(JSON.stringify(obj));

- pixelbits

---

显示相同的错误。错误：找不到支持类型为“object”的“[object Object]”对象的差异。NgFor仅支持绑定到可迭代对象，例如数组。 - Sastha

看起来不像是 JSON 对象... 你能输出到控制台看看它是什么类型的对象吗？ - pixelbits

这个值[ "AESEMS", "ChainDrive", "CICAND", "CICAPI", "CICiOS", "CICWeb", "KC_APPTV", "KCMagento", "RDLSWeb", "Riddles", "TB", "TBAND", "TBiOS", "TestProject" ] - Sastha

Answer 2

考虑到

projects = [ "AESEMS", "ChainDrive", "CICAND", "CICAPI", "CICiOS", "CICWeb", "KC_APPTV", "KCMagento", "RDLSWeb", "Riddles", "TB", "TBAND", "TBiOS", "TestProject" ] 

将JSON数组原样输出。

[ {{projects}} ]

逐个输出值

<ul>
  <li *ngFor="let project of projects"> 
     {{project}}
  </li>
</ul>

我希望它有所帮助。

- Ajay