我创建了一个包含个人资料->角色->角色职责的体验表格。我能够访问“组织”名称下的“位置”。我不知道如何访问下一个个人资料，角色，角色职责。请帮助我查找solution。我如何从配置文件
访问数据experience.component.html
<!----------------------------------------------------Expereince form start-------------------------------------------------------------->
<form [formGroup]="experiencedetailsform" (ngSubmit)="onSubmit(experiencedetailsform.value)">
<p-dataList [value]="experiences" [paginator]="true" [rows]="1">
<p-header>
Experience Details
</p-header>
<ng-template let-experience let-i="index" pTemplate="item">
<div class="ui-fluid">
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">Title</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<input type="text" pInputText pKeyFilter="alphanum" value="{{ this.experience.Title }}" formControlName="title" placeholder="Post name" name="something">
</div>
</div>
<!--
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!experiencedetailsform.controls['title'].valid&&experiencedetailsform.controls['title'].dirty">
<i class="fa fa-close"></i>
Title is required
</div>
</div>-->
</div>
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">ExperienceType</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<p-dropdown [options]="ExperienceTypes" [(ngModel)]="ExperienceType" formControlName="experiencetype" [style]="{'width':'160px'}" filter="true" name="something" placeholder="ExperienceType">
<ng-template let-item pTemplate="selectedItem">
<span style="vertical-align:middle">{{item.label}}</span>
</ng-template>
<ng-template let-ProjectType pTemplate="item">
<div class="ui-helper-clearfix" style="position: relative;height: 26px;">
<div style="font-size:14px;float:right;margin-top:4px">{{ExperienceType.label}}</div>
</div>
</ng-template>
</p-dropdown>
</div>
</div>
<!--
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!experiencedetailsform.controls['company'].valid&&experiencedetailsform.controls['company'].dirty">
<i class="fa fa-close"></i>
Experience Type is required
</div>
</div>-->
</div>
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">From Date</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<p-calendar [(ngModel)]="date2" formControlName="fromdate" [monthNavigator]="true" [yearNavigator]="true" yearRange="1960:2040" [showIcon]="true" dateFormat="dd.mm.yy" name="calendar"></p-calendar> <span style="margin-left:46px">{{date2|date}}</span>
</div>
</div>
<!--
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!experiencedetailsform.controls['fromdate'].valid&&experiencedetailsform.controls['fromdate'].dirty">
<i class="fa fa-close"></i>
From Date is required
</div>
</div>-->
</div>
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">To Date</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<p-calendar [(ngModel)]="date4" [monthNavigator]="true" formControlName="todate" [yearNavigator]="true" yearRange="1960:2040" [showIcon]="true" dateFormat="dd.mm.yy" name="calendar"></p-calendar> <span style="margin-left:46px">{{date4|date}}</span>
</div>
</div>
<!--
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!experiencedetailsform.controls['todate'].valid&&experiencedetailsform.controls['todate'].dirty">
<i class="fa fa-close"></i>
To Date is required
</div>
</div>-->
</div>
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">Renumeration</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<h6>Range: {{rangeValues[0] + ' - ' + rangeValues[1]}}</h6>
<p-slider [(ngModel)]="rangeValues" [style]="{'width':'200px'}" formControlName="CTC" [range]="true"></p-slider>
</div>
</div>
<!--
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!experiencedetailsform.controls['CTC'].valid&&experiencedetailsform.controls['CTC'].dirty">
<i class="fa fa-close"></i>
CTC is required
</div>
</div>-->
</div>
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">OrganizationName</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<input type="text" pInputText pKeyFilter="alphanum" value="{{ this.experience.Organization.OrganizationName }}" placeholder="Company name" formControlName="company" name="something">
</div>
</div>
<!--
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!experiencedetailsform.controls['company'].valid&&experiencedetailsform.controls['company'].dirty">
<i class="fa fa-close"></i>
Company is required
</div>
</div>-->
</div>
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">Location</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<input type="text" pInputText pKeyFilter="alphanum" value="{{ this.experience.Organization.Location }}" placeholder="Location" formControlName="location" name="something">
</div>
</div>
<!--
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!experiencedetailsform.controls['location'].valid&&experiencedetailsform.controls['location'].dirty">
<i class="fa fa-close"></i>
Location is required
</div>
</div>
-->
</div>
<!------------------------------------------- Profile form start------------------------------------------------------------------------------>
<p-dataList [value]="experience.profiles" [paginator]="true" [rows]="1">
<p-header>
Role Details
</p-header>
<ng-template let-profile let-i="index" pTemplate="item">
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">Title</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<input type="text" pInputText pKeyFilter="alphanum" value="{{ this.experience.profile.Title }}" formControlName="profiletitle" placeholder="Project Title" name="something">
</div>
</div>
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!projectform.controls['projecttitle'].valid&&projectform.controls['projecttitle'].dirty">
<i class="fa fa-close"></i>
Project Title is required
</div>
</div>
</div>
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">Profile Type</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<p-dropdown [options]="ProfileTypes" [(ngModel)]="ProfileType" formControlName="profiletype" [style]="{'width':'160px'}" filter="true" name="something" placeholder="ProfileType">
<ng-template let-item pTemplate="selectedItem">
<span style="vertical-align:middle">{{item.label}}</span>
</ng-template>
<ng-template let-ProjectType pTemplate="item">
<div class="ui-helper-clearfix" style="position: relative;height: 26px;">
<div style="font-size:14px;float:right;margin-top:4px">{{ProfileType.label}}</div>
</div>
</ng-template>
</p-dropdown>
</div>
</div>
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!projectform.controls['projecttype'].valid&&projectform.controls['projecttype'].dirty">
<i class="fa fa-close"></i>
Project Type is required
</div>
</div>
</div>
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">From Date</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<p-calendar [(ngModel)]="date2" [monthNavigator]="true" formControlName="fromdate" [yearNavigator]="true" yearRange="1960:2040" [showIcon]="true" dateFormat="dd.mm.yy" name="calendar"></p-calendar> <span style="margin-left:46px">{{date2|date}}</span>
</div>
</div>
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!projectform.controls['fromdate'].valid&&projectform.controls['fromdate'].dirty">
<i class="fa fa-close"></i>
From Date is required
</div>
</div>
</div>
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">To Date</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<p-calendar [(ngModel)]="date4" [monthNavigator]="true" formControlName="todate" [yearNavigator]="true" yearRange="1960:2040" [showIcon]="true" dateFormat="dd.mm.yy" name="calendar"></p-calendar> <span style="margin-left:46px">{{date4|date}}</span>
</div>
</div>
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!projectform.controls['todate'].valid&&projectform.controls['todate'].dirty">
<i class="fa fa-close"></i>
To Date is required
</div>
</div>
</div>
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">Customer Name</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<input type="text" pInputText pKeyFilter="alphanum" value="{{ this.experience.profile.CustomerName }}" formControlName="customername" placeholder="Customer Name" name="something">
</div>
</div>
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!projectform.controls['customername'].valid&&projectform.controls['customername'].dirty">
<i class="fa fa-close"></i>
Customer Name is required
</div>
</div>
</div>
<!-------------------------------------------------------Role form start--------------------------------------------------------------->
<p-dataList [value]="roledetails" [paginator]="true" [rows]="1">
<p-header>
Role Details
</p-header>
<ng-template let-roledetail let-i="index" pTemplate="item">
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">Role</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<input type="text" pInputText pKeyFilter="alphanum" value="{{ this.roledetail.Role }}" formControlName="role" placeholder="Role" name="something">
</div>
</div>
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!projectform.controls['role'].valid&&projectform.controls['role'].dirty">
<i class="fa fa-close"></i>
Role is required
</div>
</div>
</div>
<!-------------------------------------------------------Responsibility form start--------------------------------------------------------------->
<p-dataList [value]="responsibilitydetails" [paginator]="true" [rows]="1">
<p-header>
Responsibility Details
</p-header>
<ng-template let-responsibilitydetail let-i="index" pTemplate="item">
<div *ngFor="let responsibility of project.Responsibilities;">
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">Responsibilities</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<p-chips [(ngModel)]="roleresponsibilities" size="auto" formControlName="responsibilities" placeholder="responsibillities">
<ng-template let-item pTemplate="item">
{{item}} - (active) <i class="fa fa-user" style="margin-right:2em"></i>
</ng-template>
</p-chips>
</div>
<span class="float">press enter after each responsibility</span>
</div>
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!projectform.controls['responsibilities'].valid&&projectform.controls['responsibilities'].dirty">
<i class="fa fa-close"></i>
Responsibilities is required
</div>
</div>
</div>
<div class="ui-inputgroup">
<label for="email" class="ui-md-2 control-label">Description</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<textarea rows="6" cols="40" pInputTextarea autoResize="autoResize" formControlName="description" placeholder="project description"></textarea>
</div>
</div>
<div class="ui-md-4">
<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!projectform.controls['description'].valid&&projectform.controls['description'].dirty">
<i class="fa fa-close"></i>
Description is required
</div>
</div>
</div>
</div>
</ng-template>
</p-dataList>
</ng-template>
</p-dataList>
</ng-template>
</p-dataList>
<!-------------------------------------------------------Responsibility form end----------------------------------------------------------->
<div class="ui-inputgroup">
<div class="ui-md-8 ui-md-offset-4">
<button pButton type="submit" label="Submit" [disabled]="!experiencedetailsform.valid"></button>
<button pButton type="button" (click)="count()" label="Cancel"></button>
</div>
</div>
<!-------------------------------------------------------Expereince form end--------------------------------------------------------------->
</div>
</ng-template>
</p-dataList>
</form>
experience.component.ts
import { Component, OnInit } from '@angular/core';
import {SelectItem} from 'primeng/api';
import { Message } from 'primeng/components/common/api';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { PersonListService,Experience, Profile, Role, RoleResponsibility} from './person-list.service';
/**
* This class represents the lazy loaded PersonComponent.
*/
@Component({
moduleId: module.id,
selector: 'sd-experiencedetail',
templateUrl: 'experience.component.html',
styleUrls: ['experience.component.css']
})
export class ExperienceDetailFormComponent implements OnInit {
errorMessage: any;
experiences: Experience[];
profiles:Profile[];
roles:Role[];
roleresponsibilities:RoleResponsibility[];
ExperienceTypes: SelectItem[];
ExperienceType: string = '';
ProfileTypes: SelectItem[];
ProfileType: string = '';
rangeValues: number[] = [20,60];
date2: Date;
date4: Date;
dates: Date[];
msgs: Message[] = [];
experiencedetailsform: FormGroup;
submitted: boolean;
i:number;
constructor(private fb: FormBuilder,public personListService:PersonListService) { }
ngOnInit() {
this.getperson();
this.experiencedetailsform = this.fb.group({
'title': new FormControl('', Validators.required),
'experiencetype': new FormControl('', Validators.required),
'company': new FormControl('', Validators.required),
'location': new FormControl('', Validators.required),
'CTC': new FormControl('', Validators.required),
'fromdate': new FormControl('', Validators.required),
'todate': new FormControl('', Validators.required)
}
);
this.ExperienceTypes = [
{label: 'Professional', value: 'Professional'},
{label: 'Volunteering', value: 'Volunteering'},
{label: 'Freelancing', value: 'Freelancing'}
];
this.ProfileTypes = [
{label: 'Operations', value: 'Operations'},
{label: 'Project', value: 'Project'}
];
}
getperson(){
this.personListService. getExperienceDetail()
.subscribe(
resp =>{
this.experiences = resp.Experiences,
console.log(this.experiences)
error => this.errorMessage = <any>error
}
);
this.personListService. getProfileDetail()
.subscribe(
resp =>{
this.profiles = resp.Profile,
console.log(this.profiles)
error => this.errorMessage = <any>error
}
);
this.personListService. getRole()
.subscribe(
resp =>{
this.roles = resp.Roles,
console.log(this.roles)
error => this.errorMessage = <any>error
}
);
this.personListService. getResponsibilites()
.subscribe(
resp =>{
this.roleresponsibilities = resp.RoleResponsibilities,
console.log(this.roleresponsibilities)
error => this.errorMessage = <any>error
}
);
}
onSubmit(value: string) {
this.submitted = true;
this.msgs = [];
this.msgs.push({severity:'info', summary:'Success', detail:'Form Submitted'});
}
}
person.json
{
"Experiences": [ {
"ExperienceId": 1,
"Title": "GIS Analyst",
"ExperienceType": "Professional",
"FromDate": "2/2011",
"ToDate": "2/2012",
"Renumeration": "2lac to 5lac",
"Organization" :{
"OraganizationId": 1,
"OrganizationName": "Here",
"Location": "Airoli"
},
"Profiles" :[ {
"Title": "GIS Analyst",
"ProfileType": "Operations",
"FromDate": "2/2011",
"ToDate": "2/2012",
"CustomerName": "Here",
"Location": "Airoli",
"Roles": [{
"RoleName": "Data analysis",
"Responsibilities": [{
"ResponsibilityId": 1,
"Responsibility": "Find requirements",
"description": "It is the practice of finding the requirements"
}]
}]
} ]
} ]
}
person-list.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
export class Experience{
ExperienceId:number;
Title:string="";
ExperienceType:string="";
FromDate:Date;
TodaysDate:Date;
Renumeration:string="";
OraganizationId:number;
OrganizationName:string="";
Location:string="";
}
export class Profile{
OraganizationId:number;
Title:string="";
ProfileType:string="";
FromDate:Date;
TodaysDate:Date;
CustomerName:string="";
Location:string="";
}
export class Role{
RoleId:number;
RoleName:string="";
}
export class RoleResponsibility{
ResponsibilityId:number;
Responsibility:string="";
Description:string="";
}
export class Person{
Experiences:Experience[];
Profile:Profile[];
Roles:Role[];
RoleResponsibilities:RoleResponsibility[];
}
/**
* This class provides the NameList service with methods to read names and add names.
*/
@Injectable()
export class PersonListService {
/**
* Creates a new NameListService with the injected HttpClient.
* @param {HttpClient} http - The injected HttpClient.
* @constructor
*/
constructor(private http: HttpClient) {}
/**
* Returns an Observable for the HTTP GET request for the JSON resource.
* @return {string[]} The Observable for the HTTP request.
*/
getExperienceDetail(): Observable<{Experiences:Experience[] }>{
console.log("Inside the get service")
return this.http.get('app/form/person.json')
// .do(data => console.log('server data:', data)) // debug
.catch(this.handleError);
}
getProfileDetail(): Observable<{Profile:Profile[]}>{
console.log("Inside the get service")
return this.http.get('app/form/person.json')
// .do(data => console.log('server data:', data)) // debug
.catch(this.handleError);
}
getRole(): Observable<{Roles:Role[]}>{
console.log("Inside the get service")
return this.http.get('app/form/person.json')
// .do(data => console.log('server data:', data)) // debug
.catch(this.handleError);
}
getResponsibilites(): Observable<{RoleResponsibilities:RoleResponsibility[]}>{
console.log("Inside the get service")
return this.http.get('app/form/person.json')
// .do(data => console.log('server data:', data)) // debug
.catch(this.handleError);
}
/**
* Handle HTTP error
*/
private handleError (error: any) {
// In a real world app, we might use a remote logging infrastructure
// We'd also dig deeper into the error to get a better message
const errMsg = (error.message) ? error.message :
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
console.error(errMsg); // log to console instead
return Observable.throw(errMsg);
}
}