在數組上將Angular2 +管道與Dragula一起使用

Question

我有一個類似Trello的網絡應用程序。 可以將Task拖放到狀態框中（待辦事項，待辦事項和已完成）。 我使用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管道？

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

為了使管道正常工作，您需要在dragula bag元素上聲明“ 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

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