PrimeNG烤面包机未显示- Angular 6

Question

我正在尝试实现PrimeNG烤面包机，但它没有显示，不确定我错过了什么。我按照如下步骤操作：

npm install primeng --save
npm install primeicons --save

我在angular-cli样式中添加了以下内容：

"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"

在我导入的app.module.ts中

ToastModule,
BrowserAnimationsModule

在提供程序中，我有来自primeng/api的MessageService。

现在，在我的http请求服务中，我添加了这段代码：

get(url: string, showSuccessToast?: boolean, toastMessage?: string) {
        const result = this.http.get(url)
            .pipe(map((response: Response) => {

                    if (showSuccessToast) {
                        this.messageService.add({severity: 'success', summary: 'Success!', detail: toastMessage});
                    }
                    return response;
                }),
                catchError(response => this.handleError(response))
            );

        return result;
    }

在发出get请求的组件服务中，我为showSuccess添加了true，为message添加了一个字符串。

在app.component.ts中我添加了：<p-toast></p-toast>

没有抛出错误，烤面包机只是没有弹出...

Answer 1

看起来你的吐司正在显示，但它只是在你的视图初始化之前显示。我尝试重新创建您的代码，添加一个setTimeout似乎解决了这个问题

   setTimeout(() => {
      this.messageService.add({
        severity: "success",
        summary: "Success Message",
        detail: "Order submitted"
      });
    }, 1000);

我希望这能帮到你。

Answer 2

您可能想要尝试一下，看看它是否有效：

import { NgZone } from '@angular/core';
constructor(private ngZone: NgZone, ...)
this.ngZone.run(() => {
      this.messageService.add({
        severity: "success",
        summary: "Success Message",
        detail: "Order submitted"
      });
});

请参阅此帖子：https://forum.primefaces.org/viewtopic.php?f=35&t=56743&p=172855&hilit=Toast#p172855