Angular 8中如何基于条件操作对象数组并控制按钮启用状态

我从API响应中获取了如下对象数组，希望编写一个函数处理数据，根据以下条件控制按钮的启用/禁用状态标识isButtonEnable：

API响应数据 #

const data = [
      {
          "subfamily": "Hair Liquids (Includes: Bottles & Tottles, Tubes, Jars & Pouches)",
          "status": "New",
          "remainingTime": 6,
      },
      {
          "subfamily": "Skin Care - Liquids (Includes: Bottles & Tottles, Tubes, Jars & Pouches)",
          "status": "Submitted",
          "remainingTime": 6
      },
      {
          "subfamily": "Styling",
          "status": "New",
          "remainingTime": 6
      }
  ];

按钮状态控制条件 #

• 若所有对象的status为New且remainingTime > 0，则isButtonEnable为true。
• 若任意2个对象的status为Submitted，第三个对象status为New且remainingTime > 0，则isButtonEnable为true。
• 若任意1个对象的status为Submitted，其余2个对象status为New且remainingTime < 0，则isButtonEnable为false。
• 若任意1个对象的status为Submitted，其余2个对象status为New且remainingTime > 0，则isButtonEnable为true。

我尝试了以下代码，但未能正确实现需求，请求帮助完善条件判断：

enableFlagOnStatus(){
    if(data.length > 1){
      data.forEach((currentValue, index) => {
        if(currentValue.status ==='New' && remainingTime > 0){
          this.isButtonEnale = True;
        } else if(currentValue.status ==='Submitted' && remainingTime < 0){
          this.isButtonEnale = False;
        }        
      });
    }
  }

原代码存在的问题 #

1. 遍历逻辑错误：forEach循环会逐个覆盖isButtonEnable的值，最终结果仅由最后一个元素决定，无法满足多元素组合判断的需求。
2. 变量引用错误：使用remainingTime时未通过currentValue访问，正确写法应为currentValue.remainingTime。
3. 语法错误：JavaScript中布尔值是小写的true/false，而非True/False；同时存在变量名拼写错误isButtonEnale，应为isButtonEnable。
4. 场景覆盖不全：原代码仅处理了部分简单场景，完全未考虑多个Submitted或组合判断的情况。

正确实现代码 #

enableFlagOnStatus() {
    // 统计关键指标
    const submittedCount = data.filter(item => item.status === 'Submitted').length;
    const newItems = data.filter(item => item.status === 'New');
    const allNewRemainingValid = newItems.every(item => item.remainingTime > 0);
    const allNewRemainingInvalid = newItems.every(item => item.remainingTime < 0);

    let isButtonEnable = false;

    // 匹配条件1：全为New且剩余时间有效
    if (submittedCount === 0 && allNewRemainingValid) {
        isButtonEnable = true;
    } 
    // 匹配条件2：2个Submitted，剩余1个New且时间有效
    else if (submittedCount === 2 && newItems.length === 1 && newItems[0].remainingTime > 0) {
        isButtonEnable = true;
    } 
    // 匹配条件3：1个Submitted，剩余2个New且时间全部无效
    else if (submittedCount === 1 && newItems.length === 2 && allNewRemainingInvalid) {
        isButtonEnable = false;
    } 
    // 匹配条件4：1个Submitted，剩余2个New且时间全部有效
    else if (submittedCount === 1 && newItems.length === 2 && allNewRemainingValid) {
        isButtonEnable = true;
    }

    this.isButtonEnable = isButtonEnable;
}

代码说明 #

1. 先统计核心数据：Submitted状态的数量、New状态的所有项，以及New项剩余时间是否全部有效/无效，避免重复遍历数组。
2. 按需求条件依次判断，确保覆盖所有场景，逻辑清晰且无遗漏。
3. 最终将判断结果赋值给isButtonEnable，完成按钮状态控制。

内容的提问来源于stack exchange，提问作者Shilpa