Angular PrimeNG p對話框showEffect屬性不起作用

Question

我的p對話有問題。 我希望在對話框中具有淡入淡出的標題，例如以下示例：

https://i.stack.imgur.com/koh9Y.png

但是我得到了這個：

https://i.stack.imgur.com/lEyvY.png

如您所見，我的標題沒有褪色效果。 這是我的html代碼：

<p-dialog header="{{'TASKS.DETAILS' | translate}}" [(visible)]="displayDialog" [responsive]="true" [modal]="true"  showEffect="fade">

    <div class="modal-body">

        <div class="row" [ngStyle]="{'width': '500px'}" >
            <div class="col-sm-4">
                <label>{{'TASKS.DESCRIPTION' | translate}}</label>
            </div>
            <div class="col-sm-8">

            <textarea disabled placeholder=" {{'TASKS.DESCRIPTION' | translate}}"
                      rows="3" cols="30"
            ></textarea>
            </div>
        </div>

    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-default" >{{'COMMON.CANCEL' | translate}}</button>
        <button type="button" class="btn btn-primary"
        >{{'TASKS.DONE' | translate}}
        </button>
    </div>
</p-dialog>

Answer 1

確保在angular-cli.json中包含primeng.min.css和theme.css文件

"styles": [
  "src/styles.css",
  "node_modules/primeng/resources/themes/omega/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "node_modules/font-awesome/css/font-awesome.min.css",
  "node_modules/primeicons/primeicons.css"
],