Angular校验字段存在并按需展示数据时ngIf报错解决方案

1. 修复Can't bind to 'ngIf'错误 #

这个报错的核心原因是Angular的*ngIf指令属于CommonModule，你的组件所在模块未导入该模块，导致Angular无法识别这个指令。

• 若使用根模块（AppModule），修改app.module.ts：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { CommonModule } from '@angular/common'; // 导入CommonModule
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, CommonModule], // 将CommonModule加入imports数组
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 若使用功能模块（如自定义的业务模块），需在对应模块的imports数组中单独添加CommonModule（懒加载模块不会继承根模块的导入，必须手动添加）。

2. 修正代码中的冗余与语法问题 #

你的原始代码存在两处可优化的点：

• <span span *ngIf=...>多了一个无效的span属性，需删除；
• 所有分支最终都显示data.Name，可简化逻辑同时满足你的需求。

简化后的代码（保留分支结构，以便后续扩展）：

<td>
  <ng-container *ngIf="data?.IsUser; else recentView">
    <span *ngIf="data.user === 'primary'; else userType">{{data.Name}}</span>
    <ng-template #userType>{{data.Name}}</ng-template>
  </ng-container>
  <ng-template #recentView>{{ data.Name }}</ng-template>
</td>

如果后续各分支不会有内容差异，还能进一步简化为：

<td>{{ data.Name }}</td>

3. 逻辑验证 #

当前代码的*ngIf="data?.IsUser; else recentView"完全匹配你的需求：

• 当data存在且IsUser为真时，显示<ng-container>内的内容；
• 当data不存在，或data存在但IsUser为假/不存在时，自动切换到recentView模板。

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