Angular 角度2 ng选择多个选定值问题

我正在处理Angular 2，并使用库Angular 2选择组件

我需要设置默认项目选择，但当我显示选择值时，我得到一些错误。我也检查了此链接以获得帮助，但对我无效

错误为：

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']));
    }

}

模板：

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']));
    }

}

组件：

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']));
    }

}

从'@angular/core'导入{组件、视图封装、输入、渲染器、ElementRef、OnDestroy、OnInit}；
从“@angular/platform browser”导入{BrowserModule}；
从“rxjs/Rx”导入{Observable}；
从'@angular/forms'导入{FormControl，FormGroup}；
声明var jQuery，$：any；
@组成部分({
选择器：“作业”，
templateUrl:'./jobs.template.html'，
封装：视图封装。无，
})
导出类作业实现OnInit{
jobSiteOptions:Array=[]；
表格：表格组；
构造函数（）{
此。作业选项=[
{
值：“a”，
标签：“阿尔法”
},
{
值：“b”，
标签：“测试版”
},
{
值：“c”，
标签：“伽马”
}
];
}
已选择作业（项目）{
console.log（'-jobs selected（值：'+item.value+'，标签：'+
item.label+'））；
}
作业已选定（项目）{
console.log（'-取消选择作业（值：'+item.value+'，标签：'+
item.label+'））；
}
ngOnInit（）：void{
jQuery（'.parsleyjs'）.parsley（）；
this.form=newformgroup（{}）；
this.form.addControl（'selectedJobsMultiple'，newformControl（['a'，'b']）；
}
}

看起来您通过了

jobOptions

而不是

jobSiteOptions

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

该错误表示您没有在ng select中正确设置选项。我同意Nate的观点，你的代码看起来是错误的：你在组件中声明了“jobSiteOptions”，但在ng select中你很好地使用了“jobOptions”。。。他确实在组件构造函数中设置了作业选项。所以这可能不是问题所在？您的代码与angular2 select中的示例几乎完全相同。克隆示例代码，运行它，并查看它是否有效。然后将示例代码向上走，使其看起来与您的代码完全相同，一步一步。当它破裂时，你会看到你错在哪里。