Angular2でSelectize.jsを使用するにはどうすればよいですか？

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でそれらの名前を並べ替えることができるようにしたい。

しかし、インターフェースで何も起こらないので、「選択」は何もしません。どうして？

Answer 1

select2への双方向データバインディングは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 2

うまくいけば、私はしました、これは少し簡単にするためにgithub & npmで利用可能なng2-selectizeコンポーネントを作成しました。

その使用法は次のようになります。

export class MultiSelectExampleComponent { 
 
    options = [{ 
 
\t \t label: 'Angular 2', 
 
\t \t value: 'angular2' 
 
\t }, { 
 
\t \t label: 'ReactJS', 
 
\t \t value: 'reactjs' 
 
\t } 
 
    ]; 
 
    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); 
 
    } 
 
} 
 

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