在阵列上使用dragula的Angular 2 管道

Question

我有一个类似Trello的Web应用程序。使用Task s可以拖动＆amp;放入状态框(要做，去做并完成(。我使用ng2-dragula来实现阻力＆amp;删除功能，并希望实现一种用Angular 2管道过滤我的任务的方法。

所以我做到了，首先定义我的管道：

@Pipe({
  name: 'taskFilter',
  pure: false
})
export class TaskFilterPipe implements PipeTransform {
  transform(items: Task[], filter: Task): Task[] {
    if (!items || !filter) {
      return items;
    }
    // pipes items array, items which match and return true will be kept, false will be filtered out
    return items.filter((item: Task) => this.applyFilter(item, filter));
  }
  applyFilter(task: Task, filter: Task): boolean {        
    for (const field in filter) {
      if (filter[field]) {
        if (typeof filter[field] === 'string') {
          if (task[field].toLowerCase().indexOf(filter[field].toLowerCase()) === -1) {
            return false;
          }
        }
      }
    }
    return true;
  }
}

并将其添加到我的*ngFor：

<!-- For every different status we have, display a card with its tasks -->
<md-grid-tile *ngFor="let istatus of status">
    <!-- Display every task in our array and pipe in the filter -->
    <div *ngFor="let task of tasks | taskFilter:projectService.filteredTask">
        <!-- Check if said task has the right status and display it -->
        <md-card class="task-card" *ngIf="task.status == istatus" (click)="openDetails(task)">
            {{task.title}}
        </md-card>
    </div>
</md-grid-tile>

它有效，是的！但是当我拖动＆amp;放下任何任务，只是消失，再也找不到。

似乎以任何方式更改任务的状态正在消失，这如何与我的管道有关？

有没有一种方法可以同时使用Dragula和Angular 2管？

Answer 1

不是因为您的管道。我面对这个问题，这与CSS有关。

将其放入全球样式表中(当然，请根据您的需要进行样式(：

// Dragula styling for the drag n' drop
.gu-mirror {
  font-weight: 500;
  padding: 8px;
  cursor: grabbing;
  position: fixed;
  margin: 0;
  z-index: 9999;
  opacity: .8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80)
}
.gu-hide {
  display: none!important
}
.gu-unselectable {
  -webkit-user-select: none!important;
  -moz-user-select: none!important;
  -ms-user-select: none!important;
  user-select: none!important
}
.gu-transit {
  opacity: .2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20)
}

Answer 2

为了使管道工作，您需要在拖拉袋元素上声明'dragulamodels'。您现在这样做的方式，在拖放上，您只将生成的DIV移至DOM而不更新模型，因此您的管道永远不会工作，因为您的任务数组永远不会在Drop上更新。

这是一个为您提供指导的工作示例：

html

<div [dragula]='"first-bag"' [dragulaModel]="groupA.items">
  <div *ngFor='let item of groupA.items | filter:"C"' [innerHtml]='item.name'></div>
</div>
<div [dragula]='"first-bag"' [dragulaModel]="groupB.items">
  <div *ngFor='let item of groupB.items' [innerHtml]='item.name'></div>
</div>

组件

import { Component } from '@angular/core';
import { dragula, DragulaService } from 'ng2-dragula/ng2-dragula';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  groupA: any = {
    name: 'Group A',
    items: [{ name: 'Item A' }, { name: 'Item B' }, { name: 'Item C' }, { name: 'Item D' }]
  };
  groupB: any = {
    name: 'Group B',
    items: [{ name: 'Item 1' }, { name: 'Item 2C' }, { name: 'Item 3' }, { name: 'Item 4' }]
  };
}

管道

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filter',
  pure: false
})
export class FilterPipe implements PipeTransform {
  transform(items: Array<any>, filter: string): any {
    if (!items || !filter) {
      return items;
    }
    return items.filter(item => {
      for (const field in item) {
        if (item[field] === null || item[field] === undefined) {
          continue;
        }
        if (item[field].toString().toLowerCase().indexOf(filter.toLowerCase()) !== -1) {
          return true;
        }
      }
      return false;
    }
    );
  }
}

当您将元素从groupB拖动到groupa时，它将您的元素从一个数组移动到另一个数组并过滤您的第一个数组(在这种情况下，您只会在第一个数组上显示包含'c'的项目(。

添加了一个演示应用Angular2 -demo-app-dragula-pipe

Answer 3

您在发布的一组代码中缺少绑定和业务逻辑之间的绑定。拖动任何内容后，Dragula需要知道需要更新的内容。[dragulamodel]指向您的数组，[dragula]袋子/drake的名称。

<md-grid-tile *ngFor="let istatus of status" [dragula]="'task-bag'" [dragulaModel]="tasks">

请参阅docu：https：//github.com/valor-software/ng2-dragula