Angular中compute函数逻辑异常：为何req始终返回false？

你的代码里存在一个明显的逻辑错误，导致req始终为false：

在forEach循环的条件分支中，你先执行了return true;，再给req = true;赋值——return语句会直接终止当前循环的迭代函数，后面的赋值代码永远不会被执行。这就是为什么控制台先输出TRUE，但最终req = false的原因。

修复方式 #

方式1：修正forEach内的代码顺序 #

把赋值语句放到return之前（不过forEach里的return只会跳过当前迭代，不会终止整个循环，所以其实可以直接去掉return）：

private computeRequired(fields: FormField[]) {
    console.log('Check fields:', fields);
    let req = false;
    fields.forEach((field) => {
      if (field.monkeyComp.state?.required) {
        console.log(`TRUE`);
        req = true; // 先赋值，再考虑是否跳过（可选）
      }
    });
    console.log(`req = ${req}`);
    return req;
}

方式2：用更合适的Array.some()方法（推荐） #

some()方法专门用于判断数组中是否存在满足条件的元素，找到第一个符合条件的元素后就会停止遍历，代码更简洁高效：

private computeRequired(fields: FormField[]) {
    console.log('Check fields:', fields);
    const req = fields.some(field => field.monkeyComp.state?.required);
    console.log(`req = ${req}`);
    return req;
}

修复后，当fields中存在required为true的字段时，required()信号会返回true，模板中的<span class="form-required-note"> * Required </span>就会正常显示在DOM中。

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