Angular中Ng-Template包裹HTML内容无法渲染问题求助

问题核心原因 #

ng-template 是Angular提供的模板片段定义元素，默认不会直接渲染到DOM中，它仅作为内容的「模板草稿」存在，必须被结构指令、ngTemplateOutlet等消费方引用、处理后，内部内容才会被渲染到页面上。

为什么空ng-template包裹内容无法渲染 #

你写的无任何属性绑定的<ng-template>没有被任何Angular逻辑消费，相当于你只定义了一段模板，但从来没告诉Angular要把它插到哪里、什么时候显示，自然内部的所有内容（哪怕里面的*ngIf条件满足）都不会被渲染。

为什么给ng-template绑定[ngIf]就能生效 #

结构指令的*语法本质是语法糖：你在普通元素上写*ngIf="condition"，Angular编译时会自动把这个元素包裹进一个隐式生成的<ng-template>里，再把ngIf指令绑定到这个隐式模板上。
而你直接给显式写的<ng-template>绑定[ngIf]（不带星号），相当于手动完成了语法糖展开的逻辑，ngIf指令会直接消费你写的这个模板：当条件为真时，就把模板内部的内容渲染到页面对应位置，所以能正常显示。

建议的正确写法 #

如果你只是要做普通的条件渲染，不需要额外套一层无意义的<ng-template>，直接在内容根元素上写*ngIf即可：

<div class="messages-container" *ngIf="(messagesService.errors$ | async) as errors">
    <div class="messages" *ngFor="let error of errors">{{error}}</div>
    <mat-icon class="close" (click)="onClose()">close</mat-icon>
</div>

如果确实需要显式使用ng-template（比如多条件分支渲染、复用模板），要么给它绑定结构指令，要么通过ngTemplateOutlet手动指定渲染位置：

<!-- 定义模板 -->
<ng-template #errorTpl let-errors>
    <div class="messages-container">
        <div class="messages" *ngFor="let error of errors">{{error}}</div>
        <mat-icon class="close" (click)="onClose()">close</mat-icon>
    </div>
</ng-template>

<!-- 手动渲染模板 -->
<ng-container *ngTemplateOutlet="errorTpl; context: {$implicit: messagesService.errors$ | async}"></ng-container>

内容的提问来源于stack exchange，提问作者Vítor França