0

我有一个类似 Trello 的网络应用程序。带有Task可以在状态框中拖放的 s（待办事项、正在处理和已完成）。我使用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 管道？

4

3 回答 3

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)
}
于 2017-06-29T08:36:47.317 回答
0

为了让您的管道正常工作，您需要在您的 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

于 2017-06-29T15:34:20.927 回答
0

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

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

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

于 2017-07-03T13:28:35.997 回答