Angular中ngIf结合isUser与自定义纯管道致数据展示异常

核心问题：运算符优先级错误 #

Angular模板中，管道运算符|的优先级高于逻辑与&&，你写的表达式：

isUser && currentlyFollowing | includes : user._id

会被Angular解析为：

isUser && (currentlyFollowing | includes : user._id)

完全不符合你预期的「先判断是否为普通用户，再执行管道」的逻辑。

管理员场景下的报错逻辑 #

当以管理员身份登录时，isUser为false，但由于优先级问题，Angular会先执行currentlyFollowing | includes : user._id。而管理员没有关注功能，currentlyFollowing通常是undefined或null，此时你的自定义includes管道会尝试调用array.includes(item)——但undefined/null没有includes方法，直接抛出控制台错误，导致模板渲染中断，出现部分行缺失、删除按钮未正常显示的问题。

修复方案 #

1. 强制改变执行顺序：给逻辑判断部分加括号，确保只有isUser为true时才执行管道：

<div
  *ngIf="
    (isUser && currentlyFollowing) | includes : user._id;
    then unfollowTemplate;
    else followTemplate
  "
></div>

2. 管道增加空值防护：在自定义管道中添加数组校验，避免空值引发的报错：

@Pipe({
  name: 'includes',
  pure: true,
})
export class IncludesPipe<T> implements PipeTransform {
  transform(array: T[], item: T): boolean {
    // 空值判断，防止非数组类型调用includes方法
    if (!Array.isArray(array)) return false;
    return array.includes(item);
  }
}

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