Angular4 ngIf模板解析错误求助：ng-template条件渲染逻辑问题

兄弟，我刚入门Angular的时候也被模板解析错误搞疯过！你的需求其实很简单，只是可能用错了语法，我给你两种靠谱的实现方式，保证能解决问题～

方法一：用ngTemplateOutlet直接绑定条件判断 #

这种方式最简洁，适合只有两个（或少量）条件的场景：

<!-- 主容器：根据c.name的值选择要渲染的模板 -->
<ng-container [ngTemplateOutlet]="getTemplate(c.name)"></ng-container>

<!-- 定义Pipe Systems对应的模板 -->
<ng-template #PS>
  <!-- 这里放Pipe Systems的子类别选项，比如下拉框 -->
  <select>
    <option value="pipe1">管道接头</option>
    <option value="pipe2">管道阀门</option>
  </select>
</ng-template>

<!-- 定义Bathroom and Drainage对应的模板 -->
<ng-template #BD>
  <!-- 这里放Bathroom and Drainage的子类别选项 -->
  <select>
    <option value="bath1">浴室水龙头</option>
    <option value="drain1">排水地漏</option>
  </select>
</ng-template>

然后在你的组件类里添加一个辅助方法，用来返回对应的模板引用：

import { Component, TemplateRef, ViewChild } from '@angular/core';

@Component({
  // 组件元数据（比如selector、templateUrl等）
})
export class YourComponent {
  // 假设c是你定义的类别对象，可根据业务逻辑动态修改
  c = { name: 'Pipe Systems' };

  // 获取模板引用的方法
  getTemplate(name: string): TemplateRef<any> | null {
    if (name === 'Pipe Systems') {
      return this.psTemplate;
    } else if (name === 'Bathroom and Drainage') {
      return this.bdTemplate;
    }
    return null; // 无匹配类别时返回null，不渲染任何内容
  }

  // 通过ViewChild获取模板引用
  @ViewChild('PS') psTemplate!: TemplateRef<any>;
  @ViewChild('BD') bdTemplate!: TemplateRef<any>;
}

方法二：用*ngIf分别控制模板渲染 #

如果你不想写组件类的方法，也可以直接在模板里用*ngIf判断，逻辑更直观：

<!-- 当c.name是Pipe Systems时，渲染PS模板 -->
<ng-container *ngIf="c.name === 'Pipe Systems'">
  <ng-template #PS>
    <select>
      <option value="pipe1">管道接头</option>
      <option value="pipe2">管道阀门</option>
    </select>
  </ng-template>
  <ng-container *ngTemplateOutlet="PS"></ng-container>
</ng-container>

<!-- 当c.name是Bathroom and Drainage时，渲染BD模板 -->
<ng-container *ngIf="c.name === 'Bathroom and Drainage'">
  <ng-template #BD>
    <select>
      <option value="bath1">浴室水龙头</option>
      <option value="drain1">排水地漏</option>
    </select>
  </ng-template>
  <ng-container *ngTemplateOutlet="BD"></ng-container>
</ng-container>

你之前报错的常见原因 #

1. 直接把ng-template放在*ngIf元素内却不渲染：ng-template本身是“惰性”的，不会自动显示，必须用ngTemplateOutlet或者*ngIf/else来主动引用它。
2. 表达式语法错误：比如把判断相等的===写成了赋值的=，或者字符串引号混用（比如单引号套单引号）。
3. 模板引用变量大小写不匹配：比如模板定义的是#PS，但引用的时候写成了#ps，Angular会找不到对应模板。

额外提醒 #

• 确保你的c变量在组件类中已经正确定义和初始化，比如上面例子里的c = { name: 'Pipe Systems' }。
• 如果还有其他可能的类别名称，可以添加一个默认模板，避免没有匹配时页面空白。

内容的提问来源于stack exchange，提问作者Donovan Du Toit