Angular15中Ng-Bootstrap Toast头部条件显示问题求助

问题根源在于结构型指令不能叠加在同一个<ng-template>元素上：*ngIf和ngbToastHeader都属于结构型指令，同时使用会导致Angular无法正确解析模板，进而让头部始终无法正常渲染。

正确实现方式 #

用<ng-container>作为虚拟容器包裹ngbToastHeader模板，将*ngIf放在<ng-container>上（ng-container不会生成额外DOM元素，仅用于承载指令逻辑）：

<ngb-toast *ngFor="let toast of toastService.toasts"
    (hidden)="toastService.remove(toast)">
    <ng-container *ngIf="toast.header">
        <ng-template ngbToastHeader>
            <div class="me-auto">
                <fa-icon [icon]="getIcon(toast)" [fixedWidth]="true" size="lg"></fa-icon>&nbsp;<strong>{{toast.header}}</strong>
            </div>
        </ng-template>
    </ng-container>
    {{toast.message}}
</ngb-toast>

原理说明 #

• <ng-container>是Angular提供的虚拟容器，专门用来承载结构型指令，不会在最终DOM中生成实际节点。
• 当toast.header存在时，<ng-container>内的ngbToastHeader模板会被正常渲染，显示Toast头部；当toast.header为空或不存在时，整个头部模板不会被加载，自动隐藏头部区域。

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