Angular中if条件对所有值均返回true的问题排查

看起来你的代码主要有两个核心问题，再加上一个异步执行顺序的小坑，咱们一个个拆解：

1. 数据类型不匹配导致错误比较 #

这是最容易踩的坑：如果 delivery_charge 和 res[i].amount 一个是字符串、一个是数字，JavaScript 的隐式类型转换会让比较结果完全不符合预期。

举个例子：如果 delivery_charge 是字符串 "5"，res[i].amount 是数字 10，JS 会把数字转成字符串 "10"，然后按字典序比较——"5" 的 ASCII 码比 "1" 大，所以 "5" > "10" 会返回 true，这显然和咱们要的数值比较逻辑完全相反。

解决办法：
比较前统一转成数字类型，确保是数值比较：

for (var i = 0; i < res.length; i++) {
    // 先转成数字再比较
    const deliveryCharge = Number(self.deliveryData.delivery_charge);
    const amount = Number(res[i].amount);
    
    if (deliveryCharge > amount) {
        self.check_delivery_charge = true;
        console.log('Deliverycharge', deliveryCharge, 'result', amount);
        console.log('deliver charge is greater', self.check_delivery_charge);
    } else if (deliveryCharge < amount){
        self.check_delivery_charge = false;
    }
}

2. 循环逻辑会覆盖判断结果 #

你的循环每一次迭代都会直接覆盖 check_delivery_charge 的值，最终结果只取决于最后一次循环的判断：

• 比如 res 数组里前几个元素都满足 delivery_charge > amount，但最后一个元素不满足，那 check_delivery_charge 会被改成 false；
• 另外，如果 delivery_charge 和 res[i].amount 相等，你的代码完全没处理这种情况，check_delivery_charge 会保留上一次的值，很容易出现逻辑错误。

按你的需求调整逻辑： #

需求A：只要有任意一个 res[i].amount 小于 delivery_charge，就设为 true

找到符合条件的元素后直接跳出循环，避免被后续迭代覆盖：

self.check_delivery_charge = false; // 默认设为false
for (var i = 0; i < res.length; i++) {
    const deliveryCharge = Number(self.deliveryData.delivery_charge);
    const amount = Number(res[i].amount);
    
    if (deliveryCharge > amount) {
        self.check_delivery_charge = true;
        console.log('Deliverycharge', deliveryCharge, 'result', amount);
        console.log('deliver charge is greater', self.check_delivery_charge);
        break; // 找到目标就停止循环
    }
}

需求B：所有 res[i].amount 都小于 delivery_charge，才设为 true

默认设为 true，只要找到一个不满足的元素就修改状态并跳出：

self.check_delivery_charge = true; // 默认设为true
for (var i = 0; i < res.length; i++) {
    const deliveryCharge = Number(self.deliveryData.delivery_charge);
    const amount = Number(res[i].amount);
    
    if (deliveryCharge <= amount) {
        self.check_delivery_charge = false;
        console.log('Deliverycharge', deliveryCharge, 'result', amount);
        console.log('deliver charge is not greater', self.check_delivery_charge);
        break; // 找到不符合的就停止循环
    }
}

3. 异步代码的执行顺序问题 #

你的 subscribe 是异步操作，而你在订阅外部直接写了 self.DeliveryChargeValue = true 和隐藏弹窗的代码——这部分代码会在订阅回调执行之前就运行！如果弹窗隐藏逻辑依赖于 check_delivery_charge 的值，肯定会出问题。

修复：把依赖异步结果的代码移到回调内部：

hideAmountModal() {
    var self = this;
    self.home_delivery_charge = self.storeService.fetchHomedeliveryData(self.shopId);
    self.home_delivery_charge.subscribe((res: any) => {
        // 这里放循环逻辑...
        
        // 把依赖异步结果的代码移到回调里
        self.DeliveryChargeValue = true;
        self.selectAmountModal.hide();
    })
}

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