Angular2模板解析报错：templateRef.createEmbeddedView不是函数

这个错误我之前排查过几次，根源是你的模板结构存在两个关键问题，导致Angular无法正确解析ngIfElse的模板引用，进而抛出这个错误。我帮你拆解下问题并给出修复方案：

错误原因分析 #

• HTML结构不规范：<ul>的直接子元素是<span>，但根据HTML标准，<ul>只能包含<li>、<script>或<template>这类元素。非<li>的直接子元素会干扰Angular对模板的解析逻辑。
• ngIf指令用法错误：你把[ngIf]属性绑定到了<ng-template>上，这是不正确的用法。ngIf作为结构指令，要么用*ngIf语法糖直接绑定到DOM元素上，要么通过<ng-template>配合ngIf的显式语法（更推荐用语法糖）。这种错误用法会导致Angular无法正确识别模板引用，从而触发createEmbeddedView的错误。

修复后的代码 #

首先我们用<ng-container>替换<span>（它不会生成额外DOM元素，适合包裹循环和条件判断），然后把条件判断直接绑定到<li>上，修正后的代码如下：

<ul *ngIf="quizData.quiz.questions[quizData.quiz.curQuestion].locked == true; else optionBlock">
  <ng-container *ngFor="let option of quizData.quiz.questions[quizData.quiz.curQuestion].options; let i = index">
    <li *ngIf="option.answer == '' && option.right_answer == 'No'" readonly class="w3-light-grey">
      {{option.option}}
    </li>
    <li *ngIf="option.answer == 'right' || option.right_answer == 'Yes'" readonly class="w3-green">
      {{option.option}}
    </li>
    <li *ngIf="option.answer == 'wrong'" readonly class="w3-red">
      {{option.option}}
    </li>
  </ng-container>
</ul>
<ng-template #optionBlock>
  <button (click)="options($event)" 
          *ngFor="let option of quizData.quiz.questions[quizData.quiz.curQuestion].options; let i = index" 
          [id]="i" 
          class="w3-button w3-light-grey">
    {{option.option}}
  </button>
</ng-template>

额外优化建议 #

你还可以用[ngClass]动态绑定样式，让代码更简洁易维护，避免重复的*ngIf：

<ul *ngIf="quizData.quiz.questions[quizData.quiz.curQuestion].locked; else optionBlock">
  <li *ngFor="let option of quizData.quiz.questions[quizData.quiz.curQuestion].options"
      readonly
      [ngClass]="{
        'w3-light-grey': option.answer === '' && option.right_answer === 'No',
        'w3-green': option.answer === 'right' || option.right_answer === 'Yes',
        'w3-red': option.answer === 'wrong'
      }">
    {{option.option}}
  </li>
</ul>
<ng-template #optionBlock>
  <button (click)="options($event)" 
          *ngFor="let option of quizData.quiz.questions[quizData.quiz.curQuestion].options; let i = index" 
          [id]="i" 
          class="w3-button w3-light-grey">
    {{option.option}}
  </button>
</ng-template>

这样修改后，Angular就能正确解析模板结构，else optionBlock的引用也能正常工作，不会再抛出那个错误了。

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