Question

我正在使用dragula开发我的角度5拖放应用程序。我正在使用一组从服务器获取的值来生成ng dragula内容。我正在使用removeOnSpill删除不需要的数组元素。从dragula内容中删除工作非常有效。但同时如何从动态数组中删除相同的元素？

  <div class='drag-drop-wrapper' style="width: 100%" *ngIf="route.checkpoints.length>0">
    <div class='drag-drop-container' [dragula]='"third-bag"' [dragulaOptions]="thirdOptions" >
      <div #checkName *ngFor="let checkpoint of route.checkpoints" (click)="checkpointClick(checkpoint)">{{checkpoint.name}}</div>
    </div>
  </div>

我的组件代码

dragulaServiceFunc(dragulaService) {
    dragulaService.drag.subscribe((value: any) => {
      this.onDrag(value.slice(1));
    });
    dragulaService.drop.subscribe((value: any) => {
      this.onDrop(value.slice(1));
    });
    dragulaService.over.subscribe((value: any) => {
      // console.log(`over: ${value[0]}`);
      this.onOver(value.slice(1));
    });
    dragulaService.out.subscribe((value: any) => {
      this.onOut(value.slice(1));
    });
    dragulaService.dropModel.subscribe((value: any) => {
      this.onDropModel(value.slice(1));
    });
    dragulaService.removeModel.subscribe((value: any) => {
      this.onRemoveModel(value.slice(1));
    });
  }


  private hasClass(el: any, name: string): any {
    return new RegExp('(?:^|\\s+)' + name + '(?:\\s+|$)').test(el.className);
  }

  private addClass(el: any, name: string): void {
    if (!this.hasClass(el, name)) {
      el.className = el.className ? [el.className, name].join(' ') : name;
    }
  }

  private removeClass(el: any, name: string): void {
    if (this.hasClass(el, name)) {
      el.className = el.className.replace(new RegExp('(?:^|\\s+)' + name + '(?:\\s+|$)', 'g'), '');
    }
  }

  private onDrag(args: any): void {
    let [e] = args;
    this.removeClass(e, 'ex-moved');
  }

  private onDrop(args: any): void {
    let [e] = args;
    this.addClass(e, 'ex-moved');
  }

  private onOver(args: any): void {
    let [el] = args;
    this.addClass(el, 'ex-over');
  }

  private onOut(args: any): void {
    let [el] = args;
    this.removeClass(el, 'ex-over');
    //
    // console.log(el);

    // for (let checkpoint in this.checkpoints){
    //   if(this.checkpoints[checkpoint].name === el.innerHTML){
    //     this.checkpoints.splice(+checkpoint, 1);
    //   }
    // }
    //
    // if(this.checkpoints.length ===0){
    //   this.checkpointAdded = false;
    // }
  }

  private onDropModel(args: any): void {
    console.log(args);

    let [el, target, source] = args;
  }

  private onRemoveModel(args: any): void {
    let [el, source] = args;
  }

  public thirdOptions: any = {
    removeOnSpill: true,
  };

我需要从route.checkpoints数组中删除该元素。请任何人帮助我

拖出ng dragula元素

0 个答案: