首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我正在使用ngx toastr在angular 8中它显示下面的错误如果有人知道解决方案告诉我

ngx toastr是一个用于在Angular应用中显示通知消息的库。根据您提供的问题描述,显示了一个错误。要解决这个问题,您可以尝试以下几个步骤:

  1. 确保您已经正确安装了ngx toastr库。您可以通过运行以下命令来安装它:
  2. 确保您已经正确安装了ngx toastr库。您可以通过运行以下命令来安装它:
  3. 确保您已经在您的Angular应用的模块中正确导入了ngx toastr模块。您可以在您的模块文件中添加类似以下的导入语句:
  4. 确保您已经在您的Angular应用的模块中正确导入了ngx toastr模块。您可以在您的模块文件中添加类似以下的导入语句:
  5. 确保您已经在您的Angular应用的模块中正确配置了ngx toastr模块。您可以在您的模块文件的imports数组中添加类似以下的配置:
  6. 确保您已经在您的Angular应用的模块中正确配置了ngx toastr模块。您可以在您的模块文件的imports数组中添加类似以下的配置:
  7. 确保您已经在您的组件中正确使用了ngx toastr服务。您可以在您的组件文件中添加类似以下的代码:
  8. 确保您已经在您的组件中正确使用了ngx toastr服务。您可以在您的组件文件中添加类似以下的代码:
  9. 请注意,上述代码中的showError方法用于显示错误消息。您可以根据需要调整消息内容和标题。

如果您按照上述步骤进行操作仍然无法解决问题,请提供更多的错误信息和相关代码,以便我们能够更好地帮助您解决问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ionic3使用带图标带事件的toast

,比较好的解决方案是利用现有的开源代码,搜索ionic的相关组件寥寥无几,这个时候转换下思路,搜索angular的相关组件会发现有几个,经过比较后觉得ngx-toastr较为适合。...'@angular/platform-browser/animations‘此方式; 使用 上面步骤处理好后,就可以很方便使用了: import { ToastrService } from 'ngx-toastr...ngx-toastr把toasts放进自定义容器 默认toasts全局显示,如果想限定在某个div或容器里面,使得该容器不可见时不让toast干扰到其它标签,就可以利用ToastContainerModule...bootstrap,所以没导入它bootstrap相关样式,但是在打--prod编译时,还是会检测toastr-bs4-alert.scss里面的样式,爆出: @include border-radius...无论想不想用bootstrap,在调用toastr-bs4-alert.scss前,先类似导入如下两个模块,它说导入完编译后就会没有了,见截图说明(我不明白为啥导入后反而没有,黑人问号脸): @import

3K20

用VSCode开发一个asp.net core 2.0+angular 5项目(4): Angular5全局错误处理

先别急, 让我们在errorhandler里面使用toastr试试. app.error-handler.ts: import { ErrorHandler } from '@angular/core'...之所以发生这个错误, 是因为AppErrorHandler在angular引入Toastr模块之前就初始化了....并没有弹出错误信息!!!!, 但是来回切换菜单后, 开始显示错误信息了, 貌似有点迟钝. 这是什么原因呢?...Zone.js就是一个执行的上下文, 它可以在不同的异步操作之间进行持久性传递. Angular就使用了这个库, 在它之上建立了ngZone这个模块....所以当错误发生的时候, toastr的error方法被调用了(状态改变了), 但是angular并不知道这个变化, 所以toastr通知没有显示. 那如何解决呢?

1.5K50
  • 用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传

    上传单个文件需要使用IFormFile作为Action的参数. 如果上传的是多个文件, 那么应该使用IFormCollection. 这里我做的是单文件上传, 所以使用IFormFile....随后使用注入的IHostingEnvironment获得wwwroot目录, 我想要把文件上传到wwwroot/uploads下, 判断该目录是否存在, 如果不存在则创建该目录....如果照片没有显示出来, 可能是asp.net core没有启用静态文件到支持, 在Startup.cs添加这句话即可: using System; using System.Collections.Generic...首先创建一个修改photo service: 根据官方文档, 如果想要上传文件时显示进度, 那么应该使用HttpRequest, 并设置属性reportProgress为true: import { Injectable....`); break; } }); } } 这样, 上传文件时, 每个进度都会返回一个event, 我暂时就先把它打印到控制台. 看一下效果: ?

    2.9K50

    Angular Material 的设计之美

    我可以说一下自己的感受,Angular Material 的交互更加流畅,细节做的更好。 Angular Material 组件库虽然很优秀,但是却被戴上了只适合做 C 端界面的帽子。...如果只作为 DEMO 展示是没问题的,但是生产环境不推荐这样做。 ng-matero 在使用 ng add 初始化的时候增加了预构建主题选项,生成的主题只有一份,如果有特殊需求可以自行定制。...在熟悉了一种组件之后,几乎不需要额外的记忆成本,就可以很容易的猜到某些 API,简单易懂,使用很方便。不过时常翻文档还是很有必要的。 再看一下菜单组件,使用方式同样非常简单。...然而仔细研究一下就会发现,mat-table 是在 DOM 层面的抽象,本质是一样的。...ng-select ngx-formly ngx-progressbar ngx-translate ngx-toastr photoviewer

    5K30

    为什么后端老是觉得前端简单?

    总的来说,就是尽量的在体系中发挥js和DOM打交道的能力。还有就是找工作要用到的各种框架技术,都是要花时间去学的,就一个React周边技术栈多的一批,还有Angular8+ ,东西多吧?想高阶地使用?...那又要费不少时间,我自己学了3个月才勉强做成了一套自己的Angular工程模板(IndexedDB, ng2-stompjs, ngx-umeditor,Ng-Zorro, RouteReuseStrategy.../*** 看到有人点赞,再写一些 补完js的历程吧 */ 一开始接触前端的时候,是不知道H5,H4规范什么的,不管三七二十一直接html开头就是 下原来是对原型链的一种使用啊,可是发现原型链也没学,恶补了Object各种属性和方法,怪不得有人说js可以oop编程,原来如此。哦,所以data要设计成函数为啥啊?...这样的化,在开发的时候,我们就可以直接用this.data.??? 来使用 data()=>{ return {obj} }返回的任意数据了。

    71920

    (转) 别再对 Angular 表单的 ControlValueAccessor 感到迷惑

    原文链接:Never again be confused when implementing ControlValueAccessor in Angular forms 如果你正在做一个复杂项目,必然会需要自定义表单控件...网上有大量文章描述如何实现这个接口,但很少说到它在 Angular 表单架构里扮演什么角色,如果你不仅仅想知道如何实现,还想知道为什么这样实现,那本文正合你的胃口。...首先我解释下为啥需要 ControlValueAccessor 接口以及它在 Angular 中是如何使用的。...然后我将展示如何封装第三方组件作为 Angular 组件,以及如何使用输入输出机制实现组件间通信(译者注:Angular 组件间通信输入输出机制可参考官网文档),最后将展示如何使用 ControlValueAccessor...本文我将使用原生表单控件术语来区分 Angular 特定的 formControl 和你在 html 使用的表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,而不是原生表单控件如

    3.8K20

    如何开发跨框架组件?

    React中的DOM错误 因为框架正在寻找已被删除的 DOM。所以如果你想使用现有原生组件的简单包装,就不要操作 DOM。...你可以用与框架相同的方式同步它。但是我不知道如何与 React、Angular 或 Vue 同步,并且 React、Angular 和 Vue 使用的所有方法都不一样。...在跨平台的情况下,为了在各种操作系统上进行操作,这需要一个 supporter 将框架 API 与操作系统 API 进行连接。 跨框架组件也是如此。...InfiniteGrid 也将要使用跨框架组件的方法。它提供了有限的 React 支持,但你很快就会看到在 React、Angular 和 Vue 组件中提供的大量功能。...许多人在使用 egjs,而且正在用到许多框架中,如React、Angular 和 Vue。以前它需要花费两倍的时间来进行处理,因为它是用两组代码进行管理的。

    2.6K30

    基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

    ,删除则可能使用一个提示确认框,如果操作成功,我们可以使用更丰富的提示框来处理,本篇主要对比说明在Bootstrap开发中用到的这些技术要点。...,可以执行类似保存数据的提交操作的,因此需要对表单的数据进行验证,如果有错误,我们可能需要在界面上提醒,因此在页面初始化的时候,需要初始化表单的验证规则,下面是我们常规的表单初始化操作。...2)sweetalert插件的使用 虽然上面的效果非常符合Bootstrap的风格,不过界面略显单调。上面的效果不是我很喜欢这种风格,我遇到一个看起来更加美观的效果,如下所示。 ?...那么这里我们就来介绍下jNotify插件和toastr插件了。 1)jNotify提示框的使用 jNotify提示框,一款优秀的jQuery结果提示框插件。...如上面的三个依次调用。 下面是我在脚本类里面封装的饿公用方法,用来实现提示效果的显示的。

    5.2K50

    谷歌推出创新性 Web 开发工具 Project IDX,助力开发者构建强大应用

    我选择了一个 Web 应用模板——从这里你可以选择自己创建代码或使用熟悉的框架,如 React 或 Angular。 我注意到的第一个“实验性”特性是启用 Nix)(跨平台包管理器)。...最后,它开始了设置: 生成的工作空间显示了一个简单的 Web 应用程序,当然,我可以在这里做任何事情。...IDX 的 AI 功能相当隐蔽——在屏幕的右下方有一个小图标,当我点击它时,显示如下: 遗憾的是,我无法告诉你 IDX AI 到底有多好,因为我收到了以下消息:“IDX AI 在您的地区尚未启用。...在采访中我们发现,除了移动测试,IDX 的许多其他特性要么正在开发中,要么被谷歌称为“实验性”。所以我问他,是什么让 IDX 成为开发人员的创新性解决方案呢?...时间会告诉我们一切,但与此同时,你可以加入 IDX 项目等待列表,亲自尝试一下。

    24410

    前端开发:这10个Chrome扩展你不得不知

    如果您是Angular开发人员,并且没有在您的DevTool中使用过Augury,那么这是件很可惜的事情。Augury有着您直接从浏览器调试Angular应用程序所需的一切,来试试吧。 3....它以丰富着色的树状视图显示它们,使得标识属性和值变得更加容易。 5. Library Sniffer 我通常很想知道网页是基于什么框架构建的,或这个站点引用了什么库。...这个工具栏包含许多方便的工具,程序员和设计人员都可以在日常工作中使用它们,从而提高工作效率。它的范围从向元素添加轮廓、显示标尺、查找页面上的所有损坏图像到更改页面布局、操作图片等。...在浏览网页时,通常吸引我眼球的是页面中正在使用的字体。当我对某个文字感兴趣想要查看其使用的字体时,我会下意识地单击鼠标右键以打开开发人员工具,查看它的源代码。但是,这样还是太繁琐了。...它使您在把鼠标悬停在文本上就能快速查看它使用的字体。 结论 以上只是基于我自己的理解,这些扩展是我的工作更加的轻松快捷。 如果您对上面的内容有任何补充,欢迎评论告诉我,谢谢!

    2.4K10

    Angular 项目多国语言设置

    React 和 Vue 项目同理~ 这里我们仅考虑简体中文和美国英文两种语言,使用的框架版本为 @angular/core: "~12.1.0" 在日常开发中,我们难免会引入第三方 UI 框架,那么这就涉及了第三方...假设默认的语言是 zh-CN,那么你生成项目之后,在 app.module.ts 文件内,可看到下面的代码: import { NZ_I18N } from 'ng-zorro-antd/i18n';...所以,我们更改了下: // 引用的 ant design angular 库的语言处理 import { NZ_I18N } from 'ng-zorro-antd/i18n'; // 中文 import...} } 我们先判断是否存在本地存储的语言信息,如果不存在则获取浏览器设定的当前语言;当 assets/i18n/ 文件夹下面没有我们要找的语言包的时候,则使用默认 en-US.json 语言包,...本文正在参加「金石计划」

    2K20

    Angular10配置webpack打包 「详细教程」

    第四步:编辑你的第一个 Angular 组件 组件 是 Angular 应用中的基本构造块。 它们在屏幕上显示数据、监听用户输入,并根据这些输入采取行动。...添加ngx-build-plus: ng add ngx-build-plus 注意:如果要将其添加到projects文件夹中的特定子项目,请使用--project开关指向它:ng add ngx-build-plus...//  在`server`模式下,分析器将启动HTTP服务器来显示软件包报告。       //  在“静态”模式下,会生成带有报告的单个HTML文件。      ...最好的事情是它支持缩小捆绑!它解析它们以获得实际大小的捆绑模块。它也显示他们的gzipped大小!...默认情况下,它将使用(src/index.ejs如果存在)。

    5.1K20

    在同一基准下对前端框架进行比较

    Svelte —— 能够隐身的 UI 框架 —— 这是真正适用于它的妙语。Stencil 这个基准测试中的新手也表现不错。两者都相对较新,正在推动大小方面的限制。...如果说调试是删除软件错误的过程,那么编程必须是把它们加进去的过程  — Edsger Dijkstra 简述 这显示了给定库、框架或语言的简洁程度。...注意 Angular + ngrx:在 /libs 文件夹内完成的代码行数计算,仅包括*.ts 和 *.html 文件。如果你觉得这是错的,请告诉我正确的值是多少,以及你是如何计算的。...因为 RealWorld repo 没有完成它的实现。你可以考虑贡献自己的代码!用你喜欢的库或框架中实施解决方案,下次我们将会把它加进去! #2 为什么称它为 real world ?...#3 为什么不包含我最喜欢的框架? 请参阅上面的#1,但是为了以防万一,再说一次:因为实现没有在 RealWorld repo 中完成。我不做所有的实现 —— 这是社区的努力。

    96020

    开发人员的技术写作

    如果您曾经听说过使用主动语态更好,那通常就是原因。技术作者大多数情况下更喜欢使用主动语态,只有极少数例外,比如引用研究:“有人建议……”。 但这并不意味着你应该总是追求使用主动语态。...但是,如果您正在寻找一种集所有语法功能于一身的工具,Grammarly[1]是最广泛使用的工具之一。我没有从中获得任何好处。...如果你无法做到这一点,最好将代码保留原样。这些示例之所以“懒惰”,是因为它们仅仅是重述了代码显而易见的操作。在这种情况下,注释是多余的,因为它们在告诉我们已经知道的东西 - 它们并没有增加价值!...现在想象一下,如果我没有告诉你这个故事,你看到的只是上面的代码。你自然会认为在运行了第二行代码之后,cities 列表将从 Z 到 A 排序!整个混乱都是由于一个过时的注释所引起的。...因此,一个好的错误消息不应该解释为什么出现问题,因为这样的解释可能需要使用令人生畏的技术术语。这就是为什么避免使用技术术语非常重要。 不要责怪用户 想象一下:我正在尝试登录你的平台。

    20320

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    我应该使用Angular吗? 这取决于有些开发人员会告诉你最好使用React并在没有额外代码的情况下构建自己的组件。但这也可能是一个问题。...我们如何用我们的输入填充它?如果您以前曾使用过AngularJS,那么您可能会知道双向数据绑定的概念。...我们正在看到RxJS的行动。我们来讨论一下。我猜你们至少都知道一些关于承诺和构建异步代码的内容。承诺处理单一事件。POST例如,我们要求浏览器创建一个承诺。...这就是我们如何告诉我们的组件,我们正在扩展我们的配置,而不是从头开始创建它。...通过使用-prod,我们告诉AngularCLI我们需要生产版本。并且--aot告诉我们我们喜欢提前编译。在大多数情况下,我们更喜欢它,因为它可以让我们获得更小的包和更快的代码。

    42.7K10

    Angular、React、Vue.js 等 6 大主流 Web 框架都有什么优缺点?

    我是否需要使用框架? 如果不尝试回答这个问题就是我们的失职,这越来越成为社会上某些人的口头禅,在网络平台上的争论也已经发展到犹如不需要额外编写 API 能更简单创建 Web 应用那样的地步。...web 平台规范并确定了超过 12000 个 API,事实上浏览器中的维恩图也显示了这些巨大差距。 如果你是一个有着深厚技术和经验的人,确实可以坦诚的不使用框架。但你团队的其他成员呢?...Angular 2+ 有什么优势? Angular 2+ 的最大优势在于它的流行程度。也有人认为它和 Google 密切相关的名字,会影响团队使用它。...Angular 5 刚刚发布,这看来是 Angular 已经成功的印证了快速发布版本的承诺,在 Google 的持续支持下,Angular 会越来越成熟。...如果你很少需要手把手指导,并且正在寻找更好的库而不是全面的框架,那么 React + Redux 可能是正确的。

    2.4K50

    世界顶级公司的前端面试都问些什么

    常见的误解 我看到面试者犯的最大错误之一是喜欢准备一些琐碎的问题,例如“什么是盒子模型?”或“告诉我在JavaScript中==和===之间的区别?”等等。...说到库,常见的另一个错误是人们喜欢完全依赖最新的框架来解决面试问题。你可能会想:既然在开发中我可以使用jQuery,React,Angular等,为什么还要重新发明轮子,为什么不能在面试中使用它?...使用恰当的命名空间和类名。 HTML 知道哪些HTML标签能最好的表现你正在显示的内容以及相关属性,应该掌握手写HTML的技能。 语义标记。...如果你正在开发类似于Pinterest这样的站点,可能会考虑在Web上使用三列,但在移动设备上只考虑一列,那么你的设计该如何处理这个问题?...在以前将CSS放在页面的顶部,并在底部放置JS脚本的做法就足够了,但是Web正在快速发展,你应该熟悉这个领域的复杂性。 关键渲染路径。 Service workers。 图像优化。

    1.5K30

    Angular React Vue我应该选择什么?

    我觉得使用 Google 和微软强大支持的产品会更舒服。另外(...)与我的背景,我知道微软对 TypeScript 有更宏伟的蓝图。 emmmmmmmm.........我已经阅读过其他文章,JSX 更容易调试,因为 Vue 不会显示不规范 HTML 的语法错误。...这是不正确的,因为 Vue 转换 HTML 来渲染函数 - 所以错误显示没有问题(感谢 Vinicius Reis 的评论和更正!)。...大多数教程和样板文件都已经集成了 Redux,但是如果没有它,你可以使用 React(你可能不需要在你的项目中使用 Redux)。Redux 在代码中引入了复杂性和相当强的约束。...此外,虚拟 DOM 的作者之一在 Stackoverflow 上回答了性能的相关问题。 为了检查性能,我看了一下最佳的 js 框架基准。你可以自己下载并运行它,或者查看交互式结果表。 ?

    2.9K20
    领券