Блог

Я использую 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-шаблонами (слева и справа), потому что, открывая Chrome developer tools, я получаю этот вывод:

 <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-шаблона, похоже, не работают нормально и не заполнены содержимым. Что именно означает этот отображаемый вывод?

Чего я не понимаю? Как я могу попытаться это исправить?

Импортируйте SharedModule в app.module.ts

 import { SharedModule } from 'primeng/api';
  

Это решение должно работать с pTemplate

Из документов:

Панель инструментов предоставляет шаблоны начала, центра и конца для размещения содержимого в этих разделах

Вы используете left / right шаблоны, которые не поддерживаются. Ваш код должен выглядеть следующим образом:

 <p-toolbar styleClass="p-mb-4">
    <ng-template pTemplate="start">
        <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="end">
        <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>