为什么我要将 ng-template 放入手风琴选项卡中以获得这种奇怪的呈现行为？

Question

我正在使用 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 组件属性的值，以便 select 相关的 ng-模板。然后我将这些 ng-template 放在第一个手风琴选项卡中，以便将 selected 模板的内容浸入我的手风琴选项卡中。但这就是发生的事情：

如果**editPatientSelectedOption=='info'是这样渲染的：

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

同样的事情，如果 **editPatientSelectedOption !='info' 以这种方式呈现：

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

Answer 1

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

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

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

为什么我要将 ng-template 放入手风琴选项卡中以获得这种奇怪的呈现行为？

Why am I obtaning this strange rendering behavior putting ng-template into an accordion tab?

angular-template

angular-directive

ng-template

primeng

angular