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

Question

我正在尝试删除所选的项目，但是删除该项目后，所选内容变形了。我写了一些测试代码：

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>

只需选择第一个选项，然后删除即可。我不知道该怎么解决，我在做什么错？

这是结果：

Answer 1

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

LINK：-https://www.npmjs.com/package/ng-selectize

添加ng-选择为：-

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>

注意：如上述链接中所述，在angular.json中添加css和js文件。

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