问题描述
我正在使用 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>
将上面的内容移到您希望文本显示的位置,它应该可以正常工作。