JSON als Liste in einer eckigen App anzeigen

Question

Wie kann ich einzelne JSON-Daten in meinem Browser anzeigen?

app.components.ts

import { Component } from '@angular/core'; 
import { Http } from '@angular/http' 
import { HttpClient } from '@angular/common/http'; 

import { EmployeeService } from './employee.service'; 
import { Employee } from './employee'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

    employees: Employee[]; 

    constructor(private _httpService: Http, private employeeService: EmployeeService) { } 

    ngOnInit() { 
    this.getEmployees(); 
    } 

    getEmployees(): void { 

    this.employeeService.getEmployees().subscribe(data => { 
     console.log(data); 
    }); 

    this.employeeService.getEmployees() 
     .subscribe(employees => this.employees = employees); 
    } 
} 

employee.service.ts

import { Injectable } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 
import { Http } from '@angular/http'; 

import { Observable } from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 

import { Employee } from './employee'; 

@Injectable() 
export class EmployeeService { 

    constructor(public http: HttpClient, private _httpService: Http) { } 

    employees: Employee[]; 

    getEmployees(): Observable<any> { 

    console.log(this.http.get('/api/values')); 

    return this.http.get('/api/values') 
     .map(response => response);//.json()); 
    //.catch((error: any) => Observable.throw(
    // { message: error.json().message, details: error.json().details })); 
    } 
} 

app.component.html

<h1>Application says what?</h1> 
<ul> 
    {{employees}} 
</ul> 

employee.ts

export class Employee { 
    id: number; 
    name: string; 
} 

Jetzt bekomme ich nur ein Ergebnis wie folgt aus:

[ { "id": "1", "name": "Karl" }, { "id": 2, "name": "Fritz" } ]

Aber ich würde meine Mitarbeiter mit Feld einzigen Ausgang und Eingang zeigen, wie (und später Griff). Ich bin ein blutiger Anfänger. Entschuldigung für diese grundlegende Frage. Möge mir jemand helfen. Danke in Vorwärts !!

Ich versuchte dies, aber es hat nicht funktioniert:

<li *ngFor="let emp of employees"> 
    <p>{{emp.id}}</p> 
    <p>{{emp.name}}</p> 
</li> 

Answer 1

Wir zeigen unter Verwendung von json Rohr json Objektformat in der richtigen Art und Weise können. für Beispiel-

component.ts-> 
obj = { 
    a : 12, 
    b : 123 
    }; 

component.html 
{{obj | json }} 

More Details