我想在一个页面上显示一个下拉记录.json中有两个记录。我正在使用电子邮件表单在一个页面上显示一个有关电子邮件类型的记录。我正在使用p-datalist组合进行分页和在单个页面上显示单个记录。它向我显示两个记录的第一条记录（作为个人记录）（我希望个人记录显示为第一记录，办公室显示第二记录），但是电子邮件字段（输入文本字段）它在电子邮件类型下拉字段下方正常工作。请帮助我
contact.component.html
<form [formGroup]="email" (ngSubmit)="onSubmit(email.value)">
<p-dataList [value]="emails" [paginator]="true" [rows]="1">
<p-header>
Emails
</p-header>
<ng-template let-email let-i="index" pTemplate="item">
<div class="ui-fluid">
<div class="ui-inputgroup">
<label for="password" class="ui-md-2 control-label">Email Type</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<p-dropdown [options]="EmailTypes" name="something" formControlName="emailtype" [(ngModel)]="emailtype" [style]="{'width':'160px'}" filter="true" name="something" placeholder="Email Types">
<ng-template let-item pTemplate="selectedItem">
<span style="vertical-align:middle">{{ item.label }}</span>
</ng-template>
<ng-template let-EmailType pTemplate="item">
<div class="ui-helper-clearfix" style="position: relative;height: 26px;">
<div style="font-size:14px;float:right;margin-top:4px">{{ EmailType.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="!email.controls['emailtype'].valid&&email.controls['emailtype'].dirty">
<i class="fa fa-close"></i>
Email type is required
</div>-->
</div>
</div>
<div class="ui-inputgroup">
<label for="password" class="ui-md-2 control-label">Email Id</label>
<div class="ui-md-6">
<div class="ui-inputgroup">
<input id="input" type="text" size="auto" name="something" formControlName="emailid" value="{{ this.email.EmailId }}" placeholder="Email Id" pInputText [(ngModel)]="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
</div>
</div>
<div class="ui-md-4">
<!-- <div class="ui-message ui-messages-error ui-corner-all"
*ngIf="email.controls['emailid'].errors && (email.controls['emailid'].dirty || email.controls['emailid'].touched)">
<p *ngIf="email.controls['emailid'].errors.required">Email is required</p>
<p *ngIf="email.controls['emailid'].errors.pattern">The email address must contain at least the @ character</p>
</div>-->
</div>
</div>
<div class="ui-inputgroup">
<div class="ui-md-8 ui-md-offset-4">
<button pButton type="submit" label="Submit" [disabled]="!email.valid"></button>
<button pButton type="button" (click)="count()" name="something" label="Add Another"></button>
<button pButton type="button" (click)="count()" label="Cancel"></button>
</div>
</div>
</div>
</ng-template>
</p-dataList>
</form>
contact.component.ts
import { Component, OnInit } from '@angular/core';
import * as jwt from 'angular2-jwt/angular2-jwt';
import { CardModule } from 'primeng/card';
import { CalendarModule } from 'primeng/calendar';
import { ScrollPanelModule } from 'primeng/scrollpanel';
import { Response } from '@angular/http/src/static_response';
import { SelectItem } from 'primeng/api';
import { CountryService } from './country-list.service';
import { StateService } from './state-list.service';
import { CityService } from './city-list.service';
import { Console } from '@angular/core/src/console';
import { Message } from 'primeng/components/common/api';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { PersonListService,Person, Address, Email, ContactNumber} from './person-list.service';
import {DataListModule} from 'primeng/datalist';
import { forEach } from '@angular/router/src/utils/collection';
@Component({
moduleId: module.id,
selector: 'sd-contactform',
templateUrl: 'contactform.component.html',
styleUrls: ['contactform.component.css']
})
export class ContactFormComponent implements OnInit {
addresses: Address[];
addresstype: string = '';
errorMessage: any;
emails:Email[];
selectedvalidid4: string = '';
AddressTypes: SelectItem[];
selectedvalidid5: string = '';
EmailTypes: SelectItem[];
emailtype:string='';
ContactTypes: SelectItem[];
selectedvalidid7: string = '';
constructor(public personListService:PersonListService,private countryService: CountryService,private stateService: StateService,private cityService: CityService,private fb: FormBuilder) { }
ngOnInit() {
this.getperson();
this.email = this.fb.group({
'emailtype': new FormControl('', Validators.required),
'emailid': new FormControl('', [Validators.required,
Validators.pattern("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$")] )
}
);
this.EmailTypes = [
{label: 'Personal', value: 'Personal'},
{label: 'Office', value: 'Office'},
];
getperson(){
this.personListService.getEmail()
.subscribe(
for(this.i=0;this.i<2;this.i++)
{
resp =>{
this.emails = resp.Emails
this.emailtype=this.emails[this.i].EmailType
//this.emailtype=this.emails[1].EmailType
console.log(this.i)
console.log(this.emailtype)
//resp => this.addresses = resp.Addresses,
//error => this.errorMessage = <any>error
}
}
);
}
}
person.json
{
"Emails": [
{
"EmailNumber":1,
"EmailType":"Personal",
"EmailId":"vinitmapari@gmail.com"
},
{
"EmailNumber":2,
"EmailType":"Office",
"EmailId":"vinit22@gmail.com"
}
]
}