没有 TemplateRef 的提供者！ （NgIf -> 模板参考）

Question

I'm trying to show a checkmark if an answer is the accepted answer:

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

But I get this error:

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

What am I doing wrong?

Answer 1

You missed the * in front of NgIf (like we all have, dozens of times):

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

---

Without the * , Angular sees that the ngIf directive is being applied to the div element, but since there is no * or <template> tag, it is unable to locate a template, hence the error.

---

If you get this error with Angular v5:

Error: StaticInjectorError[TemplateRef]:
StaticInjectorError[TemplateRef]:
NullInjectorError: No provider for TemplateRef!

You may have <template>...</template> in one or more of your component templates. Change/update the tag to <ng-template>...</ng-template> .

Answer 2

So, I can help to understand what (and where) you made the mistake, but before it, we need to read the documentation:

Access a TemplateRef instance by placing a directive on an element (or directive prefixed with *). The TemplateRef for the embedded view is injected into the constructor of the directive, using the TemplateRef token.

You can also use a Query to find a TemplateRef associated with a component or a directive.

So:

• When using [ngIf]="something" you must use <ng-template> to access the template ref (eg: when using <template> or <ng-template> );
• Using *ngIf you can use it where you want 'cause the * garante the access to template ref(eg: when using <span> or <div> );

If you're using in your code something like <span [ngIf]="message"> {{message}}</span> you probably gonna get some error.

Answer 3

it's a common misconception to miss a few syntaxes in writing the code, one such popular mistake everyone tries to make is not using * before ngIf, which when used makes angular compiler to read ngIf as template reference variable and checks for local reference for the variable which wont be found in the file. so please check for these mistakes and learn form them if possible

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