TechOverflow Logo
TechOverflow

如何修复 Angular ROR 错误：ngIfElse must be a TemplateRef, but received '[object HTMLDivElement]'.

English Deutsch 简体中文

问题：

你的 Angular 模板如下所示：

ngif_example.html
<div *ngIf="files.length > 0 ; else noFiles">
    <!-- ... -->
</div>
<div #noFiles>
    <!-- ... -->
</div>

但当你在浏览器中打开它时，你看到以下堆栈跟踪：

ngif_error.txt
c_my_module.js:2 ERROR Error: ngIfElse must be a TemplateRef, but received '[object HTMLDivElement]'.
    at assertTemplate (common.mjs:3392:15)
    at set ngIfElse [as ngIfElse] (common.mjs:3328:9)
    at setInputsForProperty (core.mjs:11741:34)
    at elementPropertyInternal (core.mjs:10874:9)
    at ɵɵproperty (core.mjs:13637:9)
    at PlanungsunterlagenDashboardComponent_Template (planungsunterlagen-dashboard.component.html:8:55)
    at executeTemplate (core.mjs:10534:9)
    at refreshView (core.mjs:10419:13)
    at refreshComponent (core.mjs:11480:13)
    at refreshChildComponents (core.mjs:10210:9)

解决方案

错误消息告诉你 #noFiles 是一个 <div> 但它必须是 <ng-template>：

要修复它，将其更改为 ng-template：

ngif_fix.html
<ng-template #noFiles>
    <!-- ... -->
</ng-template>

如果你特别需要 <div>，你需要将其放在 ng-template 内：

ngif_fix_div.html
<ng-template #noFiles>
    <div>
        <!-- ... -->
    </div>
</ng-template>
Check out similar posts by category: Angular, JavaScript