1

Veja a imagem abaixo com a seta indicando qual é o botão; inserir a descrição da imagem aqui

Esse botão não está aparecendo, era para está assim;

inserir a descrição da imagem aqui

O que será que está acontecendo? Não aparece mensagem de erro em lugar nenhum.

Isso é uma biblioteca do PrimeNG usando no Angular.

=======================ATUALIZAÇÃO=================

Esse é meu repositório;

Essa é minha pagina com problema;

 <!--INICIO DO CONTEUDO-->
 <section class="content-header">
    <h3>{{ title }}</h3>
  </section>

  <section class="content">
   <section class="invoice">       

      <div class="container">
          <div class="ui-g">

      <form autocomplete="off" (ngSubmit)="pesquisar()">
            <div class="ui-g-12 ui-md-6 ui-fluid">
              <label>Valor</label>
              <input pInputText type="text" name="price" [(ngModel)]="filtro.price"  pTooltip="Realizar consulta pelo valor do Cardápio" tooltipPosition="top">
            </div>

            <div class="ui-g-12">
              <button pButton type="submit" label="Pesquisar"></button>
            </div>
      </form> 
          </div>
          <div class="ui-g">
            <div class="ui-g-12 ui-md-7">
                <p-dataTable [value]="menu"  
                [paginator]="true" [rows]="5"
                [responsive]="true"
                emptyMessage="Nenhum menu encontrado"
                [paginator]="true" [rows]="filtro.itensPorPagina"
                [lazy]="true" [totalRecords]="totalRegistros"
                (onLazyLoad)="aoMudarPagina($event)"  #tabela>

                    <p-column field="name" header="Nome" styleClass="col-data"></p-column>
                    <p-column field="description" header="Descrição" styleClass="col-desc"></p-column>
                    <p-column field="price" header="Valor" styleClass="col-valor">
                        <ng-template let-lanc="rowData" pTemplate="body">
                            <span >{{ lanc.price | number:'1.2-2' }}</span>
                        </ng-template>
                    </p-column>
                    <p-column styleClass="col-acoes">
                            <ng-template let-lanc="rowData"  pTemplate="body">
                            <button pButton icon="fa fa-pencil" pTooltip="Editar" tooltipPosition="top"></button>
                            <button pButton icon="fa fa-trash" 
                                pTooltip="Excluir" 
                                tooltipPosition="top" 
                                (click)="confirmarExclusao(lanc)">
                            </button>
                            </ng-template>
                        </p-column>
                </p-dataTable>

            </div>

        </div>

        </div>

    </section>
  </section>


  <!--
  <a pButton class="pi pi-pencil"></a>


  <table class="table table-hover ">
            <thead class="thead-default">
            <tr>
                <th>Nome</th>
                <th>Descrição</th>
                <th>Ação</th>
            </tr>
            </thead>
            <tbody>
                <tr *ngFor="let menu of menus">
                <td>{{ menu.name }}</td>
                <td>{{ menu.description }}</td>
                <td>
                    <a  class="btn btn-sm btn-primary">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                        Editar
                    </a>
                </td>
                </tr>
            </tbody>
        </table>




  -->

É aqui onde tenho instalado os módulos;

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MainComponent } from './restaurant/main/main.component';
import { ListComponent } from './restaurant/list/list.component';
import { AddComponent } from './restaurant/add/add.component';
import { EditComponent } from './restaurant/edit/edit.component';
import { AdminRoutingModule } from './routes/admin-routing.module';
import { SharedModule } from '../shared/shared.module';
import { AddmenuComponent } from './menu/addmenu/addmenu.component';
import { ListmenuComponent } from './menu/listmenu/listmenu.component';
import { EditmenuComponent } from './menu/editmenu/editmenu.component';

import { InputTextModule } from 'primeng/components/inputtext/inputtext';
import { ButtonModule } from 'primeng/components/button/button';
import { DataTableModule } from 'primeng/components/datatable/datatable';
import { TooltipModule } from 'primeng/components/tooltip/tooltip';
import { DropdownModule } from 'primeng/components/dropdown/dropdown';

@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule,

    FormsModule,
    AdminRoutingModule,
    SharedModule,

    //Módulos de terceiros
    InputTextModule,
    ButtonModule,
    DataTableModule,
    TooltipModule,
    DropdownModule

  ],
  declarations: [
    MainComponent, 
    ListComponent, 
    AddComponent, 
    EditComponent,


    AddmenuComponent, 
    ListmenuComponent, 
    EditmenuComponent
  ],
  exports: [
    MainComponent, 
    ListComponent, 
    AddComponent, 
    EditComponent, 


    AddmenuComponent, 
    ListmenuComponent, 
    EditmenuComponent
  ], 

})
export class AdminModule { }
13
  • 1
    Desculpe a minha ignorância, mas existem mais de 4 páginas?
    – lazyFox
    23/08/2018 às 15:55
  • 1
    @lazyFox tranquilo, esse captura de imagem mostrando 5 paginas era só para demostrar que tipo de botão eu precisaria ter, no meu projeto só tem 4 paginas :P
    – user10264
    23/08/2018 às 16:03
  • 1
    Não conheço a biblioteca PrimeNG mas não será que as setas aparecerem apenas quando existir mais de 4 páginas? Caso contrário também não faria muito sentido existirem as setas, a sua existência seria completamente desnecessária.
    – lazyFox
    23/08/2018 às 16:07
  • 1
    @lazyFox era para aparecer as setas, é porque você não conhece a biblioteca do PrimeNG.
    – user10264
    23/08/2018 às 16:09
  • 2
    primefaces.org/primeng/#/setup instala esse primeicons 23/08/2018 às 22:14

1 Resposta 1

1

Instale o pacote de ícones do PrimeNG.

Adicione ao angular.json o caminho (path) para os CSS dos ícones:

"styles": ["node_modules/primeicons/primeicons.css"]
1
  • 1
    ops, não vi as demais respostas, já resolveu! blz então...
    – joehor
    19/03/2019 às 2:19

Você deve fazer log-in para responder a esta pergunta.