在数组上将Angular2 +管道与Dragula一起使用 [英] Using Angular2+ pipes with Dragula on an array

问题描述

我有一个类似Trello的网络应用.与Task可以拖动&放在状态框中(待办事项，待办事项和已完成).我使用 ng2-dragula 来实现拖放操作删除功能，并希望实现一种使用Angular 2管道过滤任务的方法.

I have a Trello-like web app. with Tasks that can be dragged & dropped in status boxes (To do, ogoing and done). I use ng2-dragula to achieve the drag & drop feature and wanted to implement a way to filter my tasks with an Angular 2 pipe.

因此，我首先定义了管道:

So I did, by first defining my pipe:

@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>

有效，是的！但是当我拖动&放弃任何任务，它就会消失，再也找不到.

It works, yay ! But when I drag & drop any task, it simply disappears, never to be found again.

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

It seems that changing a task's status in any way is making it disappear, how can that be related to my pipe?

是否可以同时使用dragula和Angular 2管道?

Is there a way to use both dragula and Angular 2 pipes?

推荐答案

不是因为您的管道.我遇到了这个问题，它与CSS有关.

It's not because of your pipe. I faced this problem and it's CSS related.

将其放入全局样式表中(当然，可以根据需要设置样式):

Put this into a global style sheet (and of course, style it to your needs) :

// 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)
}

这篇关于在数组上将Angular2 +管道与Dragula一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！