如何在toastr中显示多行消息？

Question

如何在toastr中显示多行错误消息？

我已经按以下方式格式化我的错误消息

"Please fix the following: \r\nFirst Name is required\r\nLast Name is required\r\nEmail Address is required\r\n"

但是在 toast 中，它显示为单行。请帮忙。

- Trilok Pathak

---

我相信 Toastr 正在将字符串添加为 HTML 标签。 - Dr. Stitch

可能是如何在AngularJS中将换行符放入toastr消息？的重复问题。 - António Ribeiro

Answer 1

根据Dr. Stitch所说，toastr使用字符串作为html，因此我们必须为新行添加<br>：

Please fix the following: </br>First Name is required</br>Last Name is required</br>Email Address is required</br>

- 更新：2020年12月15日：

对于版本12+：

toastr.success('Please fix the following: </br>First Name is required</br>Last Name is required</br>Email Address is required</br>', '', { closeButton: true, timeOut: 4000, progressBar: true, allowHtml: true });

这会起作用！！！感谢您的帮助。

- Trilok Pathak

Answer 2

允许HTML格式：true

toastr.success('\'Second Review\' validation has started. </br>All SME\'s and Reviewers will get an email notification', '', { closeButton: true, timeOut: 4000, progressBar: true, allowHtml: true });

- Bert

Answer 3

请注意，在ng-toaster v12.1.0中，使用enableHtml而不是allowHtml，<br /> 作为HTML标签。旧版本也可能已经更改了此设置。

- Arslan Munir

Answer 4

首先导入toastr服务，然后编写您的消息并启用HTML。

this.toastr.success('First Name is required<br />Last Name is required<br />Email Address is required<br />', { 
enableHtml: true
});

- Shivani Khandelwal

Answer 5

use '\n' in your string and add this style 

white-space: pre-line !important;

- manikandan