角度2 ngの選択、複数選択された値問題

Question

私は2角度と使用するライブラリ角度2選択コンポーネント私が選択したデフォルトの項目を設定する必要はあり enter link description here

に取り組んでいますが、私は選択した値を表示したとき、私はいくつかのエラーを得ました。また、私は助けのために、このリンクenter link description hereをチェックしましたが、

エラーが私のために動作しませんでした：

EXCEPTION: Uncaught (in promise): Error: Error in ./Jobs class Jobs - inline template:40:6 caused by: Cannot set property 'selected' of undefined 

テンプレート：

<form class="parsleyjs" data-validate="parsley" data-parsley-validate [formGroup]="form"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <section widget class="widget"> 
       <header> 
        <h4> 
         <span class="fw-semi-bold">Jobs</span> 
        </h4> 
       </header> 
       <div class="widget-body"> 
        <ng-select 
         [options]="jobOptions" 
         multiple="true" 
         placeholder="Select Multiple Jobs" 
         formControlName="selectedJobsMultiple" 
         (selected)="jobsSelected($event)" 
         (deselected)="jobsDeselected($event)"> 
        </ng-select> 
       </div> 
      </section> 
     </div> 
    </div> 
</form> 

はモジュール：

import 'parsleyjs'; 

import { NgModule }  from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { RouterModule } from '@angular/router'; 
import { Jobs } from "./jobs.component"; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import {SelectModule} from 'angular2-select'; 
export const routes = [ 
    {path: '', component: Jobs} 
]; 

@NgModule({ 
    imports: [CommonModule, RouterModule.forChild(routes), FormsModule, SelectModule, ReactiveFormsModule], 
    declarations: [Jobs], 
}) 
export default class JobsModule { 
    static routes = routes; 
} 

コンポーネント：

import { Component,ViewEncapsulation, Input ,Renderer, ElementRef, OnDestroy, OnInit } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import {Observable} from "rxjs/Rx"; 
import {FormControl, FormGroup} from '@angular/forms'; 

declare var jQuery, $:any; 

@Component({ 
    selector: 'jobs', 
    templateUrl: './jobs.template.html', 
    encapsulation: ViewEncapsulation.None, 
}) 
export class Jobs implements OnInit { 

    jobSiteOptions: Array<any> = []; 

    form: FormGroup; 

    constructor() { 
     this.jobOptions= [ 
      { 
       value: 'a', 
       label: 'Alpha' 
      }, 
      { 
       value: 'b', 
       label: 'Beta' 
      }, 
      { 
       value: 'c', 
       label: 'Gamma' 
      } 
     ]; 
    } 


    jobsSelected(item) { 
     console.log('- jobs selected (value: ' + item.value + ', label:' + 
         item.label + ')'); 
    } 

    jobsDeselected(item) { 
     console.log('- jobs deselected (value: ' + item.value + ', label:' + 
         item.label + ')'); 
    } 

    ngOnInit():void { 
     jQuery('.parsleyjs').parsley(); 

     this.form = new FormGroup({}); 
     this.form.addControl('selectedJobsMultiple', new FormControl(['a','b'])); 
    } 

} 

Answer 1

に見えるあなたがjobOptionsを通過したようではないjobSiteOptions

<ng-select 
    [options]="jobSiteOptions" 
    multiple="true" 
    placeholder="Select Multiple Jobs" 
    formControlName="selectedJobsMultiple" 
    (selected)="jobsSelected($event)" 
    (deselected)="jobsDeselected($event)"> 
</ng-select>