在数组上使用带有 Dragula 的 Angular2+ 管道答案

【问题标题】：Using Angular2+ pipes with Dragula on an array在数组上使用带有 Dragula 的 Angular2+ 管道
【发布时间】：2017-12-02 20:31:33
【问题描述】：

我有一个类似 Trello 的网络应用程序。 Tasks 可以在状态框中拖放（待办事项、正在处理和已完成）。我使用ng2-dragula 来实现拖放功能，并希望实现一种使用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>

它有效，耶！但是当我拖放任何任务时，它就会消失，再也找不到了。

似乎以任何方式更改任务的状态都会使其消失，这与我的管道有什么关系？

有没有办法同时使用 dragula 和 Angular 2 管道？

【问题讨论】：

标签： angular dragula angular-pipe

【解决方案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)
}

【讨论】：

为什么会是 CSS 问题？它似乎没有做任何事情。以任何方式更改任务的状态都会使其消失，我想这是我的管道有问题。
因为当我遇到这个问题时，我发现没有设置移动对象的 CSS。因此，它们不会出现在用户面前。我拿了演示网站的 CSS 并自己设计了它的样式，而且效果很好。你把它放在一个全局 CSS 文件中了吗？不在您的组件文件中，我的意思是在您的styles 文件的styles 属性中引用的文件中
我确实把它放在了我的全局 CSS 文件中。
好吧，在这种情况下，我不知道发生了什么。当您移动它们以找到它们的类时尝试检查您的元素，看看我的问题是否真的是您的问题。另外，请尝试不使用管道，看看它是否有效。
我遇到了类似但不同的问题，即 gu-mirror 项目不可见。这对我帮助很大。

【解决方案2】：

为了让您的管道正常工作，您需要在 Dragula 袋子元素上声明“dragulaModels”。你现在的做法是，在拖放时，你只需将生成的 div 移动到 DOM 中而不更新你的模型，因此你的管道永远不会工作，因为你的任务数组永远不会在拖放时更新。

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

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

【讨论】：

【解决方案3】：

您发布的代码中缺少显示和业务逻辑之间的绑定。 Dragula 需要知道拖动任何内容后需要更新的内容。 [dragulaModel] 指向你的数组，[dragula] 指向你的 bag/drake 的名字。

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

见文档：https://github.com/valor-software/ng2-dragula

【讨论】：