简体   繁体   English

如何将npm软件包(ng-selectize)添加和配置为plunker角演示?

[英]How do I add and configure an npm package (ng-selectize) into a plunker angular demo?

I am trying to set up a plnkr with angular and need to install and configure ng-selectize in the demo. 我正在尝试使用angular设置plnkr,并且需要在演示中安装和配置ng-selectize。 How do I add an npm package ng-selectize to my plnkr? 如何将npm软件包ng-selectize添加到plnkr?

http://plnkr.co/edit/msFyhztaC0YP1q6wADKq 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 {}

I followed another stackoverflow answer which said to add it to the config.js but I'm getting a lodash clonedeep not found error. 我遵循另一个stackoverflow回答,该回答说是将其添加到config.js中,但我收到了lodash clonedeep not found错误。

config.js config.js

map: {
  ...,
  'ng-selectize': 'npm:ng-selectize',
  'lodash.clonedeep': 'npm:lodash.clonedeep'
}

index.html index.html

<link rel="stylesheet" href="https://unpkg.com/selectize/dist/css/selectize.css" />
<link rel="stylesheet" href="https://unpkg.com/selectize@0.12.4/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>

Plunker Example 柱塞示例

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用ng-selectize时如何在值更改时调用函数? - How to call a function on value change while using ng-selectize? 如何在plunker中正确添加NPM包? - How to add a NPM package correctly in the plunker? 删除在 ng-selectize 上选择的当前元素? - Remove the current element selected on ng-selectize? 如何禁用选择或灰色下拉列表的值项目列表中的特定值 (<ng-selectize> 或者<options> ) 在 anguarl 7 - How to disable selection or grey out the for particular value in List of value items of drop down list (<ng-selectize> or <options> ) in anguarl 7 Plunker将angular2-moment程序包添加到angular2应用程序中 - Plunker add angular2-moment package into angular2 app 如何更改与 Angular CLI 一起使用的 package 管理器(例如,使用 pnpm 而不是 npm 用于“ng add”)? - How to change package manager used with Angular CLI (e.g. using pnpm instead of npm for `ng add`)? 如何将Yarn配置为Angular CLI的默认包管理器? - How do I configure Yarn as the default package manager for Angular CLI? 如何使用Angular CLI实现ng2-ui(NPM包)? - How to implement ng2-ui (NPM package) using Angular CLI? ng add 之间的区别<package name>与 npm 安装<package name>在角 6 - Difference between ng add <package name> vs npm install <package name> in angular 6 如何在 Plunker 上更改 Angular 的版本 - How to change the version of Angular on Plunker
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM