删除在 ng-selectize 上选择的当前元素？

Question

I am trying to delete the selected item but the select is deformed when the item is deleted. I wrote some test code:

public val = null;
config = {
    labelField: 'label',
    valueField: 'value', 
    highlight: true,
    create: false,
  };

  data = [
    {
      label: '1', 
      value: '1'
    },
      {
      label: '2',
      value: '2'
    },
      {
      label: '3', 
      value: '3'
    } 
  ]

deleteFirst(){
    this.data.splice(0,1)
}

<ng-selectize [config]="config" [options] = "data" [(ngModel)]="val" 
(ngModelChange)="changed()"
></ng-selectize>
<button class="btn btn-primary" (click)="deleteFirst()">Delete First</button>

Just select the first option then delete. I don't know how solve it, what am I doing wrong?

Here is the result:

Answer 1

Stackblitz link:- https://stackblitz.com/edit/angular-ng-selectize-xanydu?file=app/case/case.component.ts

LInk:- https://www.npmjs.com/package/ng-selectize

Add ng-selectize as:-

npm i --save ng-selectize jquery selectize

Add the following to the styles array within .angular-cli.json:


"../node_modules/selectize/dist/css/selectize.css",
"../node_modules/selectize/dist/css/selectize.{your chosen theme}.css"
(the semantic-ui theme has been added to ng-selectize/selectize/selectize.semantic.css if needed)

Add the following to the scripts array within .angular-cli.json

"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/ng-selectize/selectize/selectize.standalone.js" (or take from /node_modules/selectize/...)
Import module within applicable @NgModule:

import {NgSelectizeModule} from 'ng-selectize';
imports: [..., NgSelectizeModule, ...],
Use within template: <ng-selectize [config]="..." [options] = "..." {other-attributes}></ng-selectize>

.ts

public val = null;
config = {
    labelField: 'label',
    valueField: 'value',
    maxItems: 10,
    highlight: true,
    create: false,
  };

  data = [
    {
      label: '1',
      value: '1'
    },
      {
      label: '2',
      value: '2'
    },
      {
      label: '3',
      value: '3'
    }
  ]

deleteFirst(){
    this.data.splice(0,1)
}

.html

<ng-selectize  name="mySelect"  *ngIf="data.length > 0"  [ngModelOptions]="{standalone: true}" 
 [config]="config" [options] = "data" [(ngModel)]="val"  ngDefaultControl
></ng-selectize>

<button class="btn btn-primary" (click)="deleteFirst()">Delete First</button>

Note: Add css and js files in angular.json as suggested in above link.

selectize.standalone.js  need to be inlcuded for single select