How to print angular object in angular 4

Question

How to print json value, I am very basic like angular, please some one help me.

test.html

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

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

component.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 value

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

I tried, ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Showing kind of error.

Answer 1

To print JSON:

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

Or to print it out to console:

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