2

我的工作角2和使用图书馆角2选择组件 enter link description here角2 NG-选择多个选择的值问题

我需要设置默认项选择,但是当我选择显示值我得到了一些错误。我也检查此链接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'])); 
    } 

} 
+0

你的代码几乎完全一样从angular2选的例子。克隆示例代码,运行它并查看它的工作原理。然后将示例代码逐步转换为完全像您的代码的代码。当它破裂时,你会看到你出错的地方。 –

回答

3

看起来像你通过jobOptionsjobSiteOptions

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

该错误表示您在ng-select中没有正确设置选项。我同意Nate说你的代码看起来不正确:你在你的组件中声明'jobSiteOptions',但是在ng中选择'jobOptions' –

+0

那么......他确实在组件构造函数中设置了jobOptions。所以这可能不是问题? –