Question

我试图用Angular2实现Selectize.js，但我似乎无法使它工作。这是我在HTML组件中尝试过的内容：

  <div class="form-group">
    <label for="friends">Friends</label>
    <input type="text" class="form-control" #friends
            [(ngModel)]="user.friends" name="friends"
            #picture="ngModel">
  </div>

在组件中：

declare let $: any;

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  providers: [ AuthenticationService, UserService, MessageService ]
})
export class ProfileComponent implements OnInit, AfterViewInit  {
  @ViewChild('friends') el:ElementRef;

  constructor(
    private _userService: UserService,
    private _authService: AuthenticationService,
  ) { }

  ngAfterViewInit() {

    $('#friends').selectize({
      delimiter: ',',
      persist: false,
      create: function(input) {
        return {
          value: input,
          text: input
        }
      }
    });
  }

  ngOnInit() {

    //...
  }

  onSubmit(event) {
    //...
  }

}

所以我想要做的只是在朋友输入中实现Selectize。我希望用户能够写出他朋友的名字，然后在Angular中使用一系列名称来恢复它们。

但界面没有任何反应，Selectize没有做任何事情。怎么样？

Answer 1

为了让这更容易，我已经在github＆amp; amp;上创建了ng2-selectize组件。 NPM。

它的用法可能是：

＆＃13;

export class MultiSelectExampleComponent {
  options = [{
		label: 'Angular 2',
		value: 'angular2'
	}, {
		label: 'ReactJS',
		value: 'reactjs'
	}
  ];
  config = {
    labelField: 'label',
    valueField: 'value',
    highlight: false,
    create:false,
    persist:true,
    plugins: ['dropdown_direction', 'remove_button'],
    dropdownDirection: 'down',
    maxItems: 5
  };
  placeholder: string = 'Placeholder...';
  value:string[];

  onValueChange($event) {
    console.log("Option changed: ", $event);
  }
}

＆＃13;

<div class="example">
    <ng2-selectize [config]="config" [options]="options" [placeholder]="placeholder" [(ngModel)]="value" (ngModelChange)="onValueChange($event)"></ng2-selectize>
</div>

＆＃13;

Answer 2

双向数据绑定到selectize并不适用于angular2，所以摆脱那些ngModels。相反，我所做的就是在selectize中实现onItemAdd和onItemRemove函数，如下所示：

activateSelectize() {
    var $selecitize= jQuery('.selectize');

    this.select= $selectize.selectize({
        delimiter: ',',
        create: (input) => {
            return {
                value: input,
                text: input
            };
        },
        onItemAdd: (value) => {
            this.updateValue({selected: value});
        },
        onItemRemove: (value) => {
            this.updateValue({deselected: value});
        },
    });
 }

这是html：

<select class="selectize">
        <option *ngFor="let option of options" value="{{option[0]}}">{{option[1]}}</option>
</select>

Answer 3

要使selectize.js在不使用ng2-selectize插件（额外重量）的情况下（经Angular 8测试）工作，您可以执行以下操作：

通过NPM安装插件：

npm i selectize

然后安装类型，以便您可以访问intellisense并删除所有打字稿不理解的未声明方法，这些方法与selectize相关联。

npm i @types/selectize

现在，您需要在组件中导入插件，请执行以下操作：（确保从组件中的应用程序中指向node_modules的路径正确）

import 'node_modules/selectize/dist/js/standalone/selectize.js';

如果尚未导入/安装jQuery，则需要jQuery。现在，在您的组件中使用AfterViewInit（）方法-如果在首次初始化页面时加载，则您知道DOM已创建。像这样：

    ngAfterViewInit() {
      $(<selector>).selectize({<options-object>});
}

然后类似于罗布（Rob）的建议，利用以下选择要约的方法之一：documentation here

onChange: (value) => {}, onItemAdd: (value, $item) => {}

这应该可以使您开始使用该插件，并且需要导入CSS主题或使用自己的样式。

Answer 4

我正在使用此https://www.npmjs.com/package/ng-selectize

它在我的angular 5项目中完美工作

如何在Angular2中使用Selectize.js？

4 个答案: