为什么我会获得这种将 ng-template 放入手风琴选项卡的奇怪渲染行为？

如何解决为什么我会获得这种将 ng-template 放入手风琴选项卡的奇怪渲染行为？

我正在使用 PrimeNG 开发一个 Angular 应用程序，但我在使用 PrimeNG Accordion 时遇到了以下问题。

这是我的组件的 HTML 代码：

<div class="container">  

    <p-selectButton [options]="editPatientOption"
                    [(ngModel)]="editPatientSelectedOption"
                    (onChange)="editPatientOptionOnChange($event,5)"></p-selectButton>

    <div *ngIf="editPatientSelectedOption=='info';then info_content else edit_content">here is ignored</div>

    <p-accordion [multiple]="true">

        <p-accordionTab header="ANAGRAFICA PAZIENTE">
            TEST
            <ng-template #info_content>
                INFO
            </ng-template>
        
            <ng-template #edit_content>
                EDIT
            </ng-template>
                
        </p-accordionTab>
    
        <p-accordionTab header="CARTELLA CLICNICA">
            <app-medical-record-add-form></app-medical-record-add-form>
        </p-accordionTab>
        <p-accordionTab header="VALUTAZIONE ESTETICA">
            Content 3    
        </p-accordionTab>
        <p-accordionTab header="CRONOLOGIA TRATTAMENTI SVOLTI">
            Content 3    
        </p-accordionTab>
    </p-accordion>

</div>

如您所见，我正在检查 editPatientSelectedOption 组件属性的值，以便选择相关的 ng-template。然后到第一个手风琴选项卡，我将这些 ng-template 放入我的手风琴选项卡中，以便将所选模板的内容显示出来。但这就是发生的事情：

如果 **editPatientSelectedOption=='info' 以这种方式呈现：

你怎么能看到信息内容（突出显示）出现在我的手风琴标签之外。

如果 **editPatientSelectedOption !='info' 以这种方式呈现也是一样：

为什么模板的内容是正确的（它是预期的）但呈现在预期位置之外（手风琴选项卡）。怎么了？我错过了什么？我该如何解决这种行为？

解决方法

这似乎按我的预期工作。发生这种情况是因为您的 div 被定义为处理这些模板之间的切换。例如，您可以将 ng-template 声明移动到该模板中的任何其他位置，并且您将具有相同的行为，因为这些声明的定义位置无关紧要，但使用它们的 div 的定义位置很重要。

 <div *ngIf="editPatientSelectedOption=='info';then info_content else edit_content">here is ignored</div>

将上面的内容移到您希望文本显示的位置，它应该可以正常工作。