角2. PrimeNGリストボックスが機能しない

Question

私は2つのコントロールを持つ反応型を持っています。 1つのコントロールは、国を選択するドロップダウンです。他のコントロールは、選択された国の都市を選択するチェックボックスのリストです。最後のコントロール（都市の選択）でprimeNgのリストボックスを使用しました。今、私はprimengリストボックスを使用して問題を抱えています。問題は、他のすべての都市も選択された都市を選択することです。私はまた、選択された都市がある場合でも、フォームの2番目のコントロール（都市の選択）でnull値を取得しています。

import { Component } from '@angular/core'; 
import { SelectItem } from 'primeng/primeng'; 
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.template.html' 
}) 
export class AppComponent { 

    countryForm : FormGroup; 

    countries: Country [] ; 

    constructor(public fb: FormBuilder) { 
     this.countries = [ 
     {name:'USA', continent:'North America', cities :[ 
      {name: 'New York'} , { name: 'Los Angeles'} 
      ]}, 
     {name:'UK', continent:'Europe', cities :[ 
      {name: 'London'} , { name: 'Manchester'} , { name: 'Cambridge'} , { name: 'Bristol'} 
      ]}, 
     {name:'Philippines', continent:'Asia', cities :[ 
      {name: 'Manila'} , { name: 'Davao'} , { name: 'Cebu'} 
      ]}, 
     {name:'Japan', continent:'Asia', cities :[ 
      {name: 'Tokyo'} , { name: 'Kyoto'} , { name: 'Yokohama'} 
      ]}, 
     ] 
    } 

    listOfCities: City []; 

    ngOnInit() { 
     this.countryForm= this.fb.group({ 
     selectedCountry:null, 
     selectedCities: null 
     }); 
     this.countryForm.controls['selectedCountry'].valueChanges.subscribe(
     value => { 
      if(this.countryForm.controls['selectedCountry'].value!=null){ 
      this.listOfCities = this.countryForm.controls['selectedCountry'].value.cities; 
      } 
      else{ 
      this.listOfCities = []; 
      } 
     }); 
    } 

    resetCountrySelection(){ 
     this.countryForm.controls['selectedCountry'].setValue(null); 
     this.countryForm.controls['selectedCities'].setValue([]); 

    } 
} 

ここplunkr http://plnkr.co/edit/yO4mNQveTyJgsvF9wUFE?p=preview

Answer 1

の変更は、このです：component.ts

listOfCities: SelectItem []; 

ngOnInit() { 
    this.countryForm= this.fb.group({ 
    selectedCountry:null, 
    selectedCities: null 
    }); 
    this.countryForm.controls['selectedCountry'].valueChanges.subscribe(
    value => { 
     if(this.countryForm.controls['selectedCountry'].value!=null){ 
     this.listOfCities = this.countryForm.controls['selectedCountry'].value.cities.map((v)=>{return {label:v.name, value:v.name} }); 
     } 
     else{ 
     this.listOfCities = []; 
     } 
    }); 
} 

で

アレイにのSelectItemをlistOfCitiesを変換し、都市に機能マップを適用し、{ラベルを置きます： 、値：}、テンプレートの変更時：

<p-listbox [options]="listOfCities" formControlName="selectedCities" [(ngModel)]="coutries1" multiple="multiple" checkbox="checkbox" [style]="{'margin-top':'10px','min-height':'500px','width':'100%','max-height':'500px'}" > 
     <template let-city pTemplate="body"> 
      <span style="font-size:12px;">{{city.label}}</span> 
     </template> 
     </p-listbox> 

と文字列の配列を作成します。この

[(ngModel)]="coutries1"