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

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

我正在使用 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' 以这种方式呈现:

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

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

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

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