각도 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; 
} 

구성 요소 : 당신이 jobOptions을 통과 같은

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

하지 jobSiteOptions

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