为什么PrimeNG在p工具栏组件中不显示这两个ng模板的内容？

问题描述

我正在使用 PrimeNG 版本9，并且在尝试实现此示例时发现以下问题：https://primefaces.org/primeng/showcase/#/table/crud

我的问题与以下行实现的工具栏有关：

<p-toolbar styleClass="p-mb-4">
    <ng-template pTemplate="left">
        <button pButton pRipple label="New" icon="pi pi-plus" class="p-button-success p-mr-2" (click)="openNew()"></button>
        <button pButton pRipple [label]="Delete" icon="pi pi-trash" class="p-button-danger" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length"></button>
    </ng-template>

    <ng-template pTemplate="right">
        <p-fileUpload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block"></p-fileUpload>
        <button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help"></button>
    </ng-template>
</p-toolbar>

问题是在我的代码中这些按钮未呈现。似乎该问题与两个 ng-template （左右）更相关，因为打开Chrome开发者工具后，我得到以下输出：

<p-toolbar _ngcontent-yuc-c193="" styleclass="p-mb-4" ng-reflect-style-class="p-mb-4">
    <div role="toolbar" class="p-mb-4 ui-toolbar ui-widget ui-widget-header ui-corner-all ui-helper-clearfix" ng-reflect-ng-class="ui-toolbar ui-widget ui-widget">
        <p _ngcontent-yuc-c193="">TEST</p>
        <!--bindings={
            "ng-reflect-name": "left"
            }-->
        <!--bindings={
            "ng-reflect-name": "right"
        }-->
    </div>
</p-toolbar>

因此，您可以看到这两个 ng-template 似乎不能正常工作，并且没有填充内容。该渲染输出到底是什么意思？

我想念什么？我该如何解决？

解决方法

在 app.module.ts 中导入 SharedModule

import { SharedModule } from 'primeng/api';

此解决方案应与 pTemplate 配合使用