PrimeNG按钮不会在angular2中显示fa图标和标签

问题描述：

我想在面板标题中显示“添加”和“删除”按钮。下面的代码显示没有fa-icon和没有标签的按钮PrimeNG按钮不会在angular2中显示fa图标和标签

<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>

[Primeng按钮不显示标签（HTTPS的可能重复： //stackoverflow.com/questions/45305915/primeng-button-not-showing-label） –

你使用什么网络服务器？ – BillF

答

导入BrowserAnimationsModule后，primeng按钮在面板内显示。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

答

您的示例代码中有一些结构错误。我为你创建了一个plnkr。

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>

我改正了它。但仍然显示图标和标签。 – Jan69

答

您的代码工作正常here。

您是否将font-awesome导入您的应用程序？如果没有，请在<head></head>标签内的index.html中加入。

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

此外，您将需要导入ButtonModule, PanelModule到您的应用程序。

import {ButtonModule, PanelModule} from 'primeng'; 

@NgModule({ 

    imports: [ 
    ... 
    ButtonModule, 
    PanelModule, 
    ... 
    ], 
    ... 
})

它不起作用 – Jan69

你的代码很好。它在我的掠夺者身上起作用。它必须是某种配置问题。你看到屏幕上的面板？ – Nehal

是的，我可以看到带有标题的面板。按钮显示空白。 – Jan69

答

，如果你是angular2/4的工作，你需要以下进口添加到您的app.module.ts

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

PrimeNG按钮不会在angular2中显示fa图标和标签

相关推荐