Ngx芯片在拖动时被移除

时间:2019-09-19 13:59:54

标签: angular ngx-chips npm-registry

在拖动标签以更改顺序时,会移除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>

我想要两个功能。通过拖放更改顺序,也可以通过x图标删除

    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"));
  }
}

0 个答案:

没有答案