更新NG2-Dragula下降时的Firebase值

Question

我有3条车道(早餐，午餐，晚餐(每个都有一个*ngFor，这是根据meal_type过滤的物品，我想做的就是使用Dragula来拖动物品在不同的车道之间并更新Drop上的meal_type。

<content [dragula]='"dishes"' [dragulaModel]='dishs$ | async'>
  <div *ngFor="let dish of dishes$ | async | filterMeal: 'meal_type': 'breakfast'">
    {{ dish.title }} | {{ dish.meal_type }}
  </div>
</content>
<content [dragula]='"dish"' [dragulaModel]='dishs$ | async'>
  <div *ngFor="let dish of dishes$ | async | filterMeal: 'meal_type': 'lunch'">
    {{ dish.title }} | {{ dish.meal_type }}
  </div>
</content>
<content [dragula]='"dishes"' [dragulaModel]='dishes$ | async'>
  <div *ngFor="let dish of dishes$ | async | filterMeal: 'meal_type': 'dinner'">
    {{ dish.title }} | {{ dish.meal_type }}
  </div>
</content>

构造函数

constructor(
    private modalService: NgbModal,
    private route: ActivatedRoute,
    private dragulaService: DragulaService,
    private _teamsService: TeamsService,
  ) {
    dragulaService.drop.subscribe((value) => {
      console.log('value', value);
      this.onDrop(value.slice(1));
      // I want to update the `meal_type` here 
      // and then I can create an updateMealType() 
      // function that will update Firebase.  
      // But I don't know how to tell which bag I have 
      // dropped the 'dish' into as they have the same bag name.
    });
  }


  // Dragula Events
  private hasClass(el: any, name: string) {
    return new RegExp('(?:^|\s+)' + name + '(?:\s+|$)').test(el.className);
  }
  private addClass(el: any, name: string) {
    if (!this.hasClass(el, name)) {
      el.className = el.className ? [el.className, name].join(' ') : name;
    }
  }
  private removeClass(el: any, name: string) {
    if (this.hasClass(el, name)) {
      el.className = el.className.replace(new RegExp('(?:^|\s+)' + name + '(?:\s+|$)', 'g'), '');
    }
  }
  private onDrag(args) {
    let [e, el] = args;
    console.log(args);
    this.removeClass(e, 'ex-moved');
  }
  private onDrop(args) {
    let [e, el] = args;
    this.addClass(e, 'ex-moved');
  }
  private onOver(args) {
    let [e, el, container] = args;
    this.addClass(el, 'ex-over');
  }
  private onOut(args) {
    let [e, el, container] = args;
    this.removeClass(el, 'ex-over');
  }

Answer 1

您可以将不同的ID(ID ='Dishes'(添加到Dragula Content。

<content id = 'dishes' [dragula]='"dishes"' [dragulaModel]='dishes$ | async'>
  <div *ngFor="let dish of dishes$ | async | filterMeal: 'meal_type': 'dinner'">
    {{ dish.title }} | {{ dish.meal_type }}
  </div>
</content>

在ondrop方法上检查args。

我相信drop(el，target，source，兄弟姐妹(的args，因此您可以从target.id.id中获得降落容器。