Ngx-чипы удаляются при перетаскивании - PullRequest
0 голосов
/ 19 сентября 2019

Ngx-чипы удаляются при перетаскивании тегов, чтобы изменить порядок.

Я хочу обе функции.1 Изменить порядок путем перетаскивания 2 Удалить по значку x

Может ли кто-нибудь помочь мне с этим запросом?

<p>
    Start editing to see some magic happen :)
</p>

<div class="form-group">

    <tag-input [dragZone]="'zone1'" [(ngModel)]="columnsToIgnore" [ngModelOptions]="{standalone: true}" [placeholder]="'Enter variables to ignore'"
     [secondaryPlaceholder]="'Enter variables to ignore'" [onlyFromAutocomplete]="false" (onAdd)="addIgnoreColumn($event)" (onRemove)="onItemRemoved($event)"
     (onTagEdited)="addIgnoreColumn1($event)" theme='bootstrap'>

        <tag-input-dropdown [zIndex]="10000" [appendToBody]="false" [showDropdownIfEmpty]="false" [keepOpen]="false" [dynamicUpdate]="false"
         [autocompleteItems]="columns" [identifyBy]="'name'" [displayBy]="'display'">
        </tag-input-dropdown>

    </tag-input>
</div>

Я хочу обе функции.Изменить порядок путем перетаскивания, а также удалить по значку х

    export class AppComponent {
  isFirstTimeAdded: boolean = false;
  name = 'Angular';
  columns: Column[] = [
    new Column(0, "col0", "Myheader1", "true"),
    new Column(0, "col1", "Myheader2", "false")

  ];
  private columnsToIgnore: Column[] = [];
  onItemRemoved(column: any) {
    alert("onItemRemoved");
    console.log(column);
  }

  addIgnoreColumn(column: any) {

    if (!this.isFirstTimeAdded) {
      for (var _i = 3; _i < 54; _i++) {
        this.columnsToIgnore.push(new Column(0, "col0" + _i, "Myheader" + _i, "true"));
      }
      this.isFirstTimeAdded = true;
    }
  }
  addIgnoreColumn1(column: any) {
    alert();

  }


}


export class Column {
  index: number;
  name: string;
  display: string;
  readonly: boolean;
  constructor(index: number, name: string, display: string, readonly: string) {
    this.index = index;
    this.name = name;
    this.display = display;
    this.readonly = Boolean(JSON.parse("false"));
  }
}
...