如何在Angular的ngFor循环中复用条件判断逻辑？

你提到的这个场景确实太常见了——在*ngFor循环里重复写相同的条件判断不仅冗余，后期改逻辑时还容易漏改，你想要在循环内直接定义变量的想法完全合理，但目前Angular确实不支持在*ngFor语法里直接推导自定义变量。下面给你几种可行的方案，从标准方案到轻量替代都有：

一、标准组件化方案（官方推荐方向） #

你看到的文章里提到的组件化方案确实是这类问题的标准解决方案，虽然乍一看有点繁琐，但对于需要复用的逻辑来说，长期维护性会好很多。具体可以这么做：

1. 创建一个UserRowComponent，接收user作为输入属性
2. 在组件类里封装判断逻辑：

@Component({
  selector: 'app-user-row',
  template: `
    <tr [ngClass]="{'not-active': !isActive}">
      <td>{{user.username}}</td>
      <td>{{user.status}}</td>
      <td>
        <button [disabled]="!isActive">Edit</button>
        <button [disabled]="isActive">Activate</button>
      </td>
    </tr>
  `
})
export class UserRowComponent {
  @Input() user: User;
  get isActive(): boolean {
    return this.user.status === 'ACT';
  }
}

3. 在父组件里直接复用这个行组件：

<table>
  <app-user-row *ngFor="let user of users" [user]="user"></app-user-row>
</table>

这种方式把行内的逻辑彻底封装起来，不仅解决了重复判断的问题，还让父模板更干净，而且如果后续这个行的交互或样式逻辑有变化，只需要修改这一个组件即可。

二、轻量替代方案：ng-container+模板引用变量 #

如果觉得组件化太重，完全可以用ng-container配合模板变量来实现逻辑复用，不需要额外创建组件：

<table>
  <tr *ngFor="let user of users">
    <ng-container 
      [ngTemplateOutlet]="userRowTpl" 
      [ngTemplateOutletContext]="{user: user, isActive: user.status === 'ACT'}"
    ></ng-container>
  </tr>
</table>

<ng-template #userRowTpl let-user="user" let-isActive="isActive">
  <tr [ngClass]="{'not-active': !isActive}">
    <td>{{user.username}}</td>
    <td>{{user.status}}</td>
    <td>
      <button [disabled]="!isActive">Edit</button>
      <button [disabled]="isActive">Activate</button>
    </td>
  </tr>
</ng-template>

这里通过ng-template定义行的模板，把isActive作为上下文变量传递进去，既避免了重复写条件判断，又不需要新增组件，特别适合这种简单的单模板内复用场景。

三、预处理数据（最简洁的轻量方案） #

还有一种更直接的方式：在组件类里提前把isActive字段加到每个用户对象里，模板里直接用就行：

// 组件类中预处理数据
usersWithStatus = this.users.map(user => ({
  ...user,
  isActive: user.status === 'ACT'
}));

然后模板里直接使用这个处理后的数组：

<tr *ngFor="let user of usersWithStatus" [ngClass]="{'not-active': !user.isActive}">
  <td>{{user.username}}</td>
  <td>{{user.status}}</td>
  <td>
    <button [disabled]="!user.isActive">Edit</button>
    <button [disabled]="user.isActive">Activate</button>
  </td>
</tr>

这种方式完全不需要修改模板结构，只需要在组件类里做一次数据转换，性能也更好（因为条件判断只执行一次），非常适合这种简单场景。

总结一下：如果这个行的逻辑后续可能在其他地方复用，或者会变得更复杂，推荐用组件化方案；如果只是当前模板内的简单复用，预处理数据或者ng-template的方式会更轻量。

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