我有如下的 JSON 响应。我想要做的是将 JSON 响应输入到我的 angular2 应用程序中。但我无法获得预期的输出。请对我的编码解决方案提出意见。
{
"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"
}
}
此数据应显示在我的Department.component.html文件中
<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>
这是我的Department.component.ts文件(我可以在没有任何错误的情况下获得成员发现警报)
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();
}
}
这是我的staff.service.ts文件来调用后端服务
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;
}
);
}
}
控制台输出
这是我的后端控制器(Laravel 5.4)来调用前端 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);
}
您需要将响应分配给department
:
服务 :
getDept(depid: number): Observable<any>{
return this.http.get('http://127.0.0.1:8000/api/dept/' + depid)
.map((response: Response) => response.json());
}
}
DepartmentComponent
用这个替换你的:
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();
}
}
模板端
替换这个:
<div *ngFor="let dep of department">
{{ dep.staffinfo }}
</div>
和 :
{{ department?.staffinfo | json }}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句