如何使用 cdkDropListEnterPredicate 检查多个条件？答案

【问题标题】：How to use cdkDropListEnterPredicate to check against multiple conditions?如何使用 cdkDropListEnterPredicate 检查多个条件？
【发布时间】：2020-01-11 08:11:59
【问题描述】：

我有多个连接到多个拖放区的可拖动列表，但需要根据应用程序中已设置的变量来限制可以拖动的项目。例如，如果我有以下内容：

this.maxVirtuePts = 10;
this.reqSocialStatus = false;
this.allowedTheGift = true;
this.maxHermeticMajorVirtue = 1;

对于 maxVirtuePts，如何将放置区域中的项目数量限制为 10？对于 reqSocialStatus，如何检查已删除区域中是否存在至少一项？对于 allowedTheGift，我如何检查被删除项目的名称是否包含特定文本？对于 maxHermeticMajorVirtue，如何检查从特定列表中删除的项目是否已存在以避免添加来自同一源列表的其他项目？

如果有人可以建议或提供如何有效使用 cdkDropListEnterPredicate 的示例，将不胜感激。

添加了 StackBlitz：https://stackblitz.com/edit/angular-flpx5t

【问题讨论】：

标签： angular drag-and-drop angular-material angular-cdk

【解决方案1】：

在您的放置功能中，您可以检查您想要的任何条件，如果条件不满足只需调用 return 这将阻止项目放入区域中

例如

drop(event: CdkDragDrop<string[]>) {
    if(event.container.data.length>9){
     return // this will stop item from drop
    }
    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
      );
    }
  }

【讨论】：

如果我有多个条件可以使用，是否可以使用整个范围的 if 语句？使用普通 if 语句与 EnterPredicate 之间的用例是什么？在此视图的最终版本中，可能有近 15-20 个条件在起作用。
@DuskChilder 我不知道 EnterPredicate 函数。所以不确定区别。但由于 EnterPredicate 官方推荐，我建议使用它。

【解决方案2】：

我最终使用了 cdkDropListEnterPredicate，但只有最终检查会阻止进一步传输的项目。为了进行最终检查，我将其他条件计算为变量。

【讨论】：

您能举个例子吗？