如何将json数据显示到p-dropdown和p-autocomplete中？

Question

我的问题是如何将json数据显示到p-dropdown和p-autocomplete中？我的p-dropdown的json数据是

{{ this.address.AddressType }} 

对于p-自动完成为

{{ this.address.State }},
{{ this.address.City }},
{{ this.address.Country }}

它通过使用value属性用于p-Input文本字段。我不知道如何在p-autocomplete和p-dropdown中显示值，因为（我正在使用这种格式来更新和显示相同输入字段中的数据） 我的第二个问题是我在验证部分添加了评论，它给我验证formcontrolname的错误，它说属性未定义，例如。 地址类型未定义（属性未定义）

contact.component.html

<p-growl [value]="msgs" sticky="sticky"></p-growl>

<form [formGroup]="address" (ngSubmit)="onSubmit(address.value)">

<p-dataList [value]="addresses">
        <p-header>
                    Addresses
        </p-header>

        <ng-template let-address let-i="index" pTemplate="item">

<div class="ui-fluid">

<div class="ui-inputgroup"> 

            <label for="email" class="ui-md-2 control-label">Address Type</label>

                <div class="ui-md-6">
                    <div class="ui-inputgroup">
                        <p-dropdown [options]="AddressTypes"  name="something" formControlName="addresstype" [(ngModel)]="selectedvalidid6" [style]="{'width':'160px'}" filter="true" name="something" placeholder="Address Types">
                                <ng-template let-item pTemplate="selectedItem">

                                    <span style="vertical-align:middle">{{ item.label }}</span>
                                </ng-template>
                                <ng-template let-AddressType pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 26px;">

                                        <div style="font-size:14px;float:right;margin-top:4px">{{ AddressType.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="!address.controls['addresstype'].valid&&address.controls['addresstype'].dirty">
                            <i class="fa fa-close"></i>
                            addresstype is required
                        </div>-->
                </div>
    </div>

    <div class="ui-inputgroup"> 

                <label for="email" class="ui-md-2 control-label">Address L1</label>

                    <div class="ui-md-6">
                        <div class="ui-inputgroup">
                            <input type="text" pInputText pKeyFilter="alphanum" formControlName="addressl1" name="something" value="{{ this.address.AddressL1 }}" placeholder="Address L1"> 
                        </div>
                    </div>

                    <div class="ui-md-4">     
                            <!--<div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['addressl1'].valid&&address.controls['addressl1'].dirty">
                                <i class="fa fa-close"></i>
                                addressl1 is required
                            </div>-->
                    </div>
    </div>

 <div class="ui-inputgroup"> 

            <label for="email" class="ui-md-2 control-label">Address L2</label>

                <div class="ui-md-6">
                    <div class="ui-inputgroup">
                        <input type="text" pInputText pKeyFilter="alphanum" name="something" formControlName="addressl2" value="{{ this.address.AddressL2 }}" placeholder="Address L2">
                    </div>
                </div>

                <div class="ui-md-4">     
                     <!--   <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['addressl2'].valid&&address.controls['addressl2'].dirty">
                            <i class="fa fa-close"></i>
                            addressl2 is required
                        </div>-->
                </div>
    </div>


    <div class="ui-inputgroup"> 

            <label for="password" class="ui-md-2 control-label">State</label>

                <div class="ui-md-6">
                    <div class="ui-inputgroup">
                        <p-autoComplete [(ngModel)]="state" [suggestions]="filteredStatesSingle" formControlName="state" (completeMethod)="filterStateSingle($event)" field="{{this.address.State}}" [size]="auto"
                        placeholder="State"  [minLength]="1" name="something">


                    </p-autoComplete>                    


                    </div>
                </div>

                <div class="ui-md-4">     
                    <!--    <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['state'].valid&&address.controls['state'].dirty">
                            <i class="fa fa-close"></i>
                        State is required
                        </div>-->
                </div >
    </div>

    <div class="ui-inputgroup"> 

                <label for="password" class="ui-md-2 control-label">Locality</label>

                    <div class="ui-md-6">
                        <div class="ui-inputgroup">
                            <input type="text" pInputText pKeyFilter="alpha" name="something" formControlName="locality" value="{{ this.address.Locality }}" placeholder="Locality">

                        </div>
                    </div>

                    <div class="ui-md-4">     
                         <!--   <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['locality'].valid&&address.controls['locality'].dirty">
                                <i class="fa fa-close"></i>
                            Locality is required
                            </div>-->
                    </div>
    </div>

    <div class="ui-inputgroup"> 

            <label for="password" class="ui-md-2 control-label">City</label>

                <div class="ui-md-6">
                    <div class="ui-inputgroup">
                        <p-autoComplete [(ngModel)]="city" [suggestions]="filteredCitiesSingle" formControlName="city" (completeMethod)="filterCitySingle($event)" field="city" [size]="auto"
                        placeholder="City" [minLength]="1"  name="something"></p-autoComplete>                    

                    </div>
                </div>

                <div class="ui-md-4">     
                    <!--    <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['city'].valid&&address.controls['city'].dirty">
                            <i class="fa fa-close"></i>
                        City is required
                        </div>-->
                </div>
    </div>

    <div class="ui-inputgroup"> 

            <label for="password" class="ui-md-2 control-label">Country</label>

                <div class="ui-md-6">

                             <p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" formControlName="country" (completeMethod)="filterCountrySingle($event)" field="country" [size]="auto"
                            placeholder="Country" [minLength]="1"  name="something"></p-autoComplete>                    
                            <span style="margin-left:10px">Country: {{country ? country.country||country : 'none'}}</span>


                </div>

                <div class="ui-md-4">     
                 <!--   <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['country'].valid&&address.controls['country'].dirty">
                            <i class="fa fa-close"></i>
                            country is required
                        </div>-->
                </div>
    </div>

    <div class="ui-inputgroup"> 

            <label for="password" class="ui-md-2 control-label">Postal Code</label>

                <div class="ui-md-6">
                    <div class="ui-inputgroup">
                        <input type="text" pInputText pKeyFilter="num" name="something" formControlName="postalcode" value="{{ this.address.Postalcode }}" placeholder="Postal Code">
                    </div>
                </div>

                <div class="ui-md-4">     
                    <!--    <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['postalcode'].valid&&address.controls['postalcode'].dirty">
                            <i class="fa fa-close"></i>
                            postalcode is required
                        </div>-->
                </div>
    </div>

    <div class="ui-inputgroup">
            <div class="ui-md-8 ui-md-offset-4">

     <button pButton type="submit" label="Submit" [disabled]="!address.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>

person.json

{
"Addresses": [{ 

            "AddressId":101,
            "AddressType":"Permanent",
            "AddressL1":"Mind space", 
            "AddressL2":"A.b.road",
            "Locality":"Airoli(east)",
            "City":"Mumbai", 
            "State":"Maharashtra",
            "Country":"India",
            "Postalcode":400011
         },
         { 

                "AddressId":102,
                "AddressType":"Permanent",
                "AddressL1":"Mind space1", 
                "AddressL2":"N.m.road",
                "Locality":"Pune(west)",
                "City":"Pune", 
                "State":"Maharashtra",
                "Country":"India",
                "Postalcode":400012
             }]
}

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';

@Component({ 
  moduleId: module.id,
  selector: 'sd-contactform',
  templateUrl: 'contactform.component.html',
  styleUrls: ['contactform.component.css']
})
export class ContactFormComponent implements OnInit {

errorMessage: any;

addresses: Address[];

emails:Email[];

contactnumbers:ContactNumber[];

  date3: Date;

  dates: Date[];

  rangeDates: Date[];

  minDate: Date;

  maxDate: Date;

  es: any;

  invalidDates: Array<Date>;

  val2: string = 'Male';

  val3: string = 'Unmarried';

  text: string;

  ValidIds: SelectItem[];

  selectedvalidid2: string = '';

  Religions: SelectItem[];

  selectedvalidid3: string = '';

  BloodGroups: SelectItem[];


  selectedvalidid4: string = '';

  AddressTypes: SelectItem[];

  selectedvalidid5: string = '';

  EmailTypes: SelectItem[];

  selectedvalidid6: string = '';

  ContactTypes: SelectItem[];

  selectedvalidid7: string = '';

  country: any;

  filteredCountriesSingle: any[];

  state: any;

  filteredStatesSingle: any[];

  city: any;

  filteredCitiesSingle: any[];

  msgs: Message[] = [];

  address: FormGroup;

  email: FormGroup;

  contact: FormGroup;

  submitted: boolean;

  constructor(public personListService:PersonListService,private countryService: CountryService,private stateService: StateService,private cityService: CityService,private fb: FormBuilder) { }



  filterCountrySingle(event) {
      let query = event.query;
      this.countryService.getCountries().then(countries => {
          this.filteredCountriesSingle = this.filterCountry(query, countries);
      });
  }

  filterCountry(query, countries: any[]):any[] {
    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
    let filtered : any[] = [];
    for(let i = 0; i < countries.length; i++) {
        let country = countries[i];
        if(country.country.toLowerCase().indexOf(query.toLowerCase()) == 0) {
            filtered.push(country);
        }
    }
    return filtered;
}

filterStateSingle(event) {
    let query = event.query;
    this.stateService.getStates().then(states => {
        this.filteredStatesSingle = this.filterState(query,states);
    });
}

filterState(query,states: any[]):any[] {
  //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
  let filtered : any[] = [];
  for(let i = 0; i < states.length; i++) {
      let state = states[i];
      if(state.state.toLowerCase().indexOf(query.toLowerCase()) == 0) {
          filtered.push(state);
      }
  }
  return filtered;
}


filterCitySingle(event) {
    let query = event.query; 
    this.cityService.getCitys().then(cities => {
        this.filteredCitiesSingle = this.filterCity(query,cities);
    });
}

filterCity(query,cities: any[]):any[] {
  //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
  let filtered : any[] = [];
  for(let i = 0; i < cities.length; i++) {
      let city = cities[i];
      if(city.city.toLowerCase().indexOf(query.toLowerCase()) == 0) {
        console.log(city);

          filtered.push(city);

      }
  }
  return filtered;
}


  ngOnInit() {

    this.getperson();

    this.address = this.fb.group({
        'addresstype': new FormControl('', Validators.required),
        'addressl1': new FormControl('', Validators.required),
        'addressl2': new FormControl('', Validators.required),
        'state': new FormControl('', Validators.required),
        'locality': new FormControl('', Validators.required),
        'city': new FormControl('', Validators.required),
        'country': new FormControl('', Validators.required),
        'postalcode': new FormControl('', Validators.required)


    }
);

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.contact = this.fb.group({
        'contacttype': new FormControl('', Validators.required),
        'countrycode': new FormControl('', Validators.required),
        'regioncode': new FormControl('', Validators.required),
        'mobileno': new FormControl('', [Validators.required,Validators.minLength(10),Validators.maxLength(10)]),
        'landlineno': new FormControl('',[Validators.required,Validators.minLength(8),Validators.maxLength(8)])
    }
);
    this.AddressTypes = [
      {label: 'Native', value: 'Native'},
      {label: 'Temporary', value: 'Temporary'},
      {label: 'Permanent', value: 'Permanent'},
      {label: 'Careof', value: 'Careof'},

  ];

  this.EmailTypes = [
    {label: 'Personal', value: 'Personal'},
    {label: 'Office', value: 'Office'},

];

this.ContactTypes = [
  {label: 'Home', value: 'Home'},
  {label: 'Office', value: 'Office'},
];

       this.es = {
            firstDayOfWeek: 1,
            dayNames: [ 'domingo','lunes','martes','miércoles','jueves','viernes','sábado' ],
            dayNamesShort: [ 'dom','lun','mar','mié','jue','vie','sáb' ],
            dayNamesMin: [ 'D','L','M','X','J','V','S' ],
            monthNames: [ 'enero','febrero','marzo','abril','mayo','junio','julio','agosto','septiembre','octubre','noviembre','diciembre' ],
            monthNamesShort: [ 'ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic' ],
            today: 'Hoy',
            clear: 'Borrar'
        }


        let today = new Date();
        let month = today.getMonth();
        let year = today.getFullYear();
        let prevMonth = (month === 0) ? 11 : month -1;
        let prevYear = (prevMonth === 11) ? year - 1 : year;
        let nextMonth = (month === 11) ? 0 : month + 1;
        let nextYear = (nextMonth === 0) ? year + 1 : year;


        let invalidDate = new Date();
        invalidDate.setDate(today.getDate() - 1);
        this.invalidDates = [today,invalidDate];
    }

    onSubmit(value: string) {
        this.submitted = true;
        this.msgs = [];
        this.msgs.push({severity:'info', summary:'Success', detail:'Form Submitted'});
    }

    getperson(){

        this.personListService.getAddress()
         .subscribe(
          resp => this.addresses = resp.Addresses,

           //resp => this.addresses = resp.Addresses,
           error => this.errorMessage = <any>error
         );
        this.personListService.getEmail()
         .subscribe(
          resp => this.emails = resp.Emails,

           //resp => this.addresses = resp.Addresses,
           error => this.errorMessage = <any>error
         );
         this.personListService.getContact()
         .subscribe(
          resp => this.contactnumbers = resp.ContactNumbers,

           //resp => this.addresses = resp.Addresses,
           error => this.errorMessage = <any>error
         ); 
       }
    }