Question

我有一个类似Trello的网络应用程序。可以拖动的Task个＆amp;在状态框中掉落（做，ogoing和完成）。我使用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>

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

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

有没有办法同时使用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

为了让您的烟斗正常工作，您需要声明“拖拉模型”＆＃39;在你的拖拉袋元素。你现在这样做，拖放你只需将你生成的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时，它会将元素从一个数组移动到另一个数组并过滤您的第一个数组（在这种情况下，您只会显示包含＆＃39; c＆＃39;在第一个阵列上。）

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

Answer 3

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

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

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

在阵列上使用带有Dragula的Angular2 +管道

3 个答案: