Wie bekomme ich JSON Array Antwortdaten in angular2 Anwendung

Question

Ich habe JSON Antwort wie unten. Was ich tun möchte, ist unter JSON Antwort in meine angular2 Anwendung zu bekommen. aber ich konnte die erwartete Ausgabe nicht bekommen. Bitte geben Sie Meinungen über meine Kodierungslösung.

{ 
"staffinfo": { 
    "id": 3, 
    "DeptID": 2, 
    "OfficeID": 3, 
    "FirstName": "Loreiya", 
    "LastName": "Cheng", 
    "DOB": "1991-04-02", 
    "IsWorking": 1, 
    "created_at": "2017-10-22 13:07:15", 
    "updated_at": "2017-10-22 13:07:15" 
}, 
"officeinfo": { 
    "id": 3, 
    "Name": "Finance-Payroll ", 
    "Address": "No 20/1, Cross street, dalas, Block A ", 
    "Description": "staff salary division ", 
    "created_at": "2017-10-24 00:00:00", 
    "updated_at": "2017-10-24 00:00:00" 
} 

}

diese Daten sollten

<form #f="ngForm" (ngSubmit)="onSubmit(f)"> 
    <div class="form-group"> 
    <label for="depid">Department</label> 
    <select name="depid" id="depid" class="form-control" ngModel> 
     <option value="1">HR</option> 
     <option value="2">Finance</option> 
     <option value="3">Marketing</option> 
    </select> 
    </div> 
    <button type="submit" class="btn btn-primary">Search</button> 
</form> 

<div *ngFor="let dep of department"> 
    {{ dep.staffinfo }} 
</div> 

das ist mein department.component.ts Datei (ich konnte in meinem department.component.html Datei anzuzeigen erhalten Mitglieder gefunden Alarm ohne Fehler)

import { Component, OnInit, Input } from '@angular/core'; 
import { NgForm } from "@angular/forms"; 
import { StaffService } from "../staff.service"; 
import { Department } from "../department.interface"; 

@Component({ 
    selector: 'app-department', 
    templateUrl: './department.component.html', 
    styleUrls: ['./department.component.css'] 
}) 
export class DepartmentComponent implements OnInit { 
@Input() department: Department[]; 

    constructor(private staffService: StaffService) { } 

    ngOnInit() { 
    } 

    onSubmit(form: NgForm) { 
    this.staffService.getDept(form.value.depid) 
    .subscribe(
    () => alert('Members found') 
    ); 
    form.reset(); 
    } 
} 

das ist mein staff.service.ts Datei Backend-Service

import { Injectable } from "@angular/core"; 
import { Http, Response, Headers } from "@angular/http"; 
import 'rxjs/Rx'; 
import { Observable } from "rxjs"; 

@Injectable() 
export class StaffService{ 
    constructor(private http: Http) { 
    } 

getDept(depid: number): Observable<any>{ 
    return this.http.get('http://127.0.0.1:8000/api/dept/' + depid) 
    .map(
     (response: Response) => { 
     return response.json().department; 
     } 
    ); 
    } 
} 

Konsole ouput

Postman JSON-Antwort

das ist mein Backend zu nennen Controller (Laravel 5.4) zum Aufruf der Front-End-Anwendung Angular2.

public function getDeptinfo($id) 
    { 
    $staffinfo = Staff::find($id); 

    if($staffinfo){ 
     $officeinfo = Office::find($staffinfo['OfficeID']); 
    } 

    $response = [ 
     'staffinfo' => $staffinfo, 
     'officeinfo' => $officeinfo 
    ]; 

    return response()->json($response, 200); 
    } 

Answer 1

Sie müssen reposnse zum department zuzuordnen:

Service:

getDept(depid: number): Observable<any>{ 
    return this.http.get('http://127.0.0.1:8000/api/dept/' + depid) 
    .map((response: Response) => response.json()); 
    } 
} 

Ihre DepartmentComponent mit diesem ersetzen:

export class DepartmentComponent implements OnInit { 
    department: Department; 

    constructor(private staffService: StaffService) { } 

    onSubmit(form: NgForm) { 
     this.staffService.getDept(form.value.depid).subscribe((res) => { 
      this.department = res; 
     }); 
     form.reset(); 
    } 
} 

Vorlage Seite

diese ersetzen:

<div *ngFor="let dep of department"> 
    {{ dep.staffinfo }} 
</div> 

mit:

{{ department?.staffinfo | json }}