没有 TemplateRef 提供者！ (NgIf ->TemplateRef)

Question

如果答案是已接受的答案，我会尝试显示复选标记：

template: `<div ngIf="answer.accepted">&#10004;</div>`

但我收到此错误：

EXCEPTION: No provider for TemplateRef! (NgIf ->TemplateRef)

我做错了什么？

Answer 1

你错过了 NgIf 前面的

*

（就像我们所有人一样，有几十次了）：

<div *ngIf="answer.accepted">&#10004;</div>

---

如果没有

*

，Angular 会看到

ngIf

指令应用于

div

元素，但由于没有

*

或

<template>

标签，因此无法找到模板，因此会出现错误.

---

如果您在 Angular v5 中遇到此错误：

错误：StaticInjectorError[TemplateRef]：
  静态注入器错误[TemplateRef]：
    NullInjectorError：没有 TemplateRef 的提供者！

您的一个或多个组件模板中可能有

<template>...</template>

。 将标签更改/更新为

<ng-template>...</ng-template>

。

Answer 2

因此，我可以帮助您了解您犯了什么错误（以及在哪里），但在此之前，我们需要阅读文档：

通过将指令放在 元素（或以 * 为前缀的指令）。模板参考 将嵌入视图注入到构造函数中 指令，使用 TemplateRef 令牌。

您还可以使用查询来查找与某个模板关联的 TemplateRef 组件或指令。

所以：

• 使用

  [ngIf]="something"

  时，您必须使用

  <ng-template>

  来访问模板引用（例如：使用

  <template>

  或

  <ng-template>

  时）；
• 使用

  *ngIf

  您可以在您想要的地方使用它，因为 * 保证对模板引用的访问（例如：使用

  <span>

  或

  <div>

  时）；

如果您在代码中使用类似

<span [ngIf]="message"> {{message}}</span>

的内容，您可能会遇到一些错误。

Answer 3

在编写代码时错过一些语法是一种常见的误解，每个人都试图犯的一个常见错误是在 ngIf 之前没有使用 * ，使用它会使 Angular 编译器将 ngIf 读取为模板引用变量并检查 ngIf 的本地引用在文件中找不到的变量。所以请检查这些错误，如果可能的话，从中吸取教训

<div *ngIf="answer.accepted">&#10004;</div>

Answer 4

如果语句中添加了 2 个 *ngIf，则会出现此问题。 我有类似的代码

删除其中之一后，它起作用了。

希望这会有所帮助