我正在尝试设置一个带角度的plnkr,需要在演示中安装和配置ng-selectize。如何在我的plnkr中添加npm包ng-selectize?
http://plnkr.co/edit/msFyhztaC0YP1q6wADKq
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { NgSelectizeModule } from 'ng-selectize';
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<ng-selectize [config]="config" [optgroups]="optgroups" [options]="options"></ng-selectize>
</div>
`,
})
export class App {
name:string;
config = {
highlight: false,
create: false,
persist: true,
plugins: ['dropdown_direction', 'remove_button'],
dropdownDirection: 'down',
optgroupField: 'group', // Name of the property to group items by.
optgroupLabelField: 'label', // Name of the property to render as an option group label.
labelField: 'label',
valueField: 'value',
maxItems: 1000
}
optgroups = [
{
group: 'colors',
label: 'colors'
},
{
group: 'animals',
label: 'animals'
}
];
options = [
{
label: 'Red',
value: 'red',
group: 'colors'
}, {
label: 'Blue',
value: 'blue',
group: 'colors'
}, {
label: 'Green',
value: 'green',
group: 'colors'
}, {
label: 'Dog',
value: 'dog',
group: 'animals'
}
];
constructor() {
this.name = `Angular! v${VERSION.full}`
}
}
@NgModule({
imports: [ BrowserModule, NgSelectizeModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
我跟着另一个stackoverflow回答说,将其添加到config.js但我得到一个lodash clonedeep未找到错误。
config.js
map: {
...,
'ng-selectize': 'npm:ng-selectize',
'lodash.clonedeep': 'npm:lodash.clonedeep'
}
的index.html
<link rel="stylesheet" href="https://unpkg.com/selectize/dist/css/selectize.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/selectize.bootstrap3.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/ng-selectize/selectize/selectize.standalone.js"></script>