angular - 使用 CdkDragDrop 从特定下拉列表中拖动时，如何更新 Angular 中的变量？

Question

我正在使用带有材质拖放功能的 Angular 8。我有多个下拉列表链接到三个目标下拉列表。在我的 StackBlitz 示例中，我想只允许列表中具有 id MajHermeticVirtues 的一项（Major Hermetic Virtues 下的第二组）。我有一个名为 allowedHermeticVirtues 的布尔值，如果我从该列表中拖动一个项目，我想将其设置为 false。如果该变量随后设置为 false，我如何使用它来阻止源列表中的更多项目？

所有列表都使用

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
                      event.container.data,
                      event.previousIndex,
                      event.currentIndex);
      this.calculateTotal();
    }
  }

对于丢弃事件。

如果我从特定列表中拖动项目，如何更新变量？ 这个问题几乎是我要找的，但只针对特定的源列表（在我的例子中，是 MajHermeticVirtues 一个）。

Answer 1

通过如下更改我的 drop 函数来管理它（不优雅，但似乎有效）：

drop(event: CdkDragDrop<any[]>) {
  if (event.previousContainer === event.container) {
        moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
      } else if (event.previousContainer.id === 'MajHermeticVirtues') {
          if (this.totalMajorHermeticVirtues < this.maxHermeticMajorVirtue) {
            this.totalMajorHermeticVirtues++;
            console.log('this.totalMajorHermeticVirtues :', this.totalMajorHermeticVirtues);

            transferArrayItem(event.previousContainer.data,
                          event.container.data,
                          event.previousIndex,
                          event.currentIndex);
            this.calculateTotal();
          }
        } else if (event.container.id === 'MajHermeticVirtues') {
            this.totalMajorHermeticVirtues--;
            console.log('this.totalMajorHermeticVirtues :', this.totalMajorHermeticVirtues);

            transferArrayItem(event.previousContainer.data,
                          event.container.data,
                          event.previousIndex,
                          event.currentIndex);
            this.calculateTotal();
      } else {
        transferArrayItem(event.previousContainer.data,
          event.container.data,
          event.previousIndex,
          event.currentIndex);
        this.calculateTotal();
      }
    }