PrimeNG pas le bouton affichage de fa icône et l'étiquette en angular2

Je veux afficher Ajouter et Supprimer le bouton dans le panneau d'en-tête. Code ci-dessous affiche bouton sans fa-icône et pas d'étiquette

<p-panel>
  <p-header>
   <div>
     Registration Form
     <button type="button" pButton icon="fa-plus" style="float:right" label="Add">
     </button>
   </div>
  </p-header>
</p-panel>
InformationsquelleAutor Jan69 | 2017-07-27
  1. 12

    Votre code fonctionne bien ici.

    Avez-vous importé font-awesome à votre demande? Si non, ajouter ceci dans votre index.html dans le <head></head> tag.

    <head> 
...
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
 </head>

    Aussi, vous aurez besoin d'importer ButtonModule, PanelModule à votre demande.

    import {ButtonModule, PanelModule} from 'primeng';

@NgModule({

  imports: [
    ...
    ButtonModule,
    PanelModule,
    ...
  ],
  ...
})
    • Sa ne fonctionne pas
    • Vous code est très bien. Il a travaillé dans mon plunker. Il doit être une sorte de problème de configuration. Vous voyez le panneau à l'écran?
    • Oui, je suis capable de voir le panneau avec l'en-tête. Bouton d'affichage vide.
    • Pouvez-vous ajouter votre app.module.ts dans votre question, s'il vous plaît?
    • Ajouté app.le module.ts
    • Je ne vois pas le import {ButtonModule, PanelModule} from 'primeng'; déclaration dans votre app.module.ts. Je les vois à l'intérieur de imports mais ils l'habitude de travailler sans l'instruction import. Aussi, vous avez mentionné dans la question que pButton travaille dans JobCleanupComponent. Êtes-vous importer primeng modules de ce composant?
    • Il est là dans l'instruction d'importation d'importation { DataTableModule , ButtonModule,DialogModule,InputTextareaModule,PanelModule,SharedModule} à partir de 'primeng/primeng"; je ne suis pas importer quoi que ce soit dans le JobCleanupComponent.
    • Woopps mon mauvais! Merci pour cette remarque
    • Merci pour l'importation de ButtonModule

    InformationsquelleAutor Nehal
  2. 3

    Après l'importation de la BrowserAnimationsModule , primeng Boutons sont affichés à l'intérieur du panneau.

    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    • J'ai cette. Pas de travail...
    InformationsquelleAutor Jan69
  3. 2

    si vous travaillez avec angular2/4, vous aurez besoin d'ajouter les éléments suivants à l'importation de votre application.le module.ts

    import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
    • oui, mais pas nécessairement d'application.le module.ts - doit être ajouté au module dans lequel il est utilisé - +1
    InformationsquelleAutor Firman Drage
  4. 0

    Vous avez quelques erreurs de structure dans votre exemple de code. J'ai créé un plnkr pour vous.

    http://plnkr.co/edit/myrBq9tv4iNRNd6v6bhT?p=preview

    <p-panel>
  <p-header>
    <div>Registration Form
      <button type="button" pButton icon="fa-plus" style="float:right" label="Add"></button>
      <button type="button" class="ui-button-danger" pButton icon="fa-minus" style="float:right" label="Delete"></button>
    </div>
  </p-header>
</p-panel>
    • j'ai corrigé ça. Mais encore l'icône et l'étiquette n'est pas de l'affichage.
    InformationsquelleAutor BillF
  5. 0

    Changer de pi-près de la fa-près travaillé pour moi.

    Semble qu'il y a des nouveaux et anciens de la police impressionnant icônes. Ils doivent être utilisés comme ceci:

    class="pi pi-xxx" or class="fa fa-xxx"
    InformationsquelleAutor makkasi