用新行显示内联错误消息答案

【问题标题】：Display inline error message with new line用新行显示内联错误消息
【发布时间】：2020-09-08 06:53:54
【问题描述】：

我正在尝试显示内联错误消息

我的目标是实现这一目标：

错误 1

错误 2

但它出现在同一行，如：错误 1 错误 2

我尝试使用 document.createElement("br") 但没有用。

下面是我的代码：

HTML：

  <span *ngIf="ifError()"class="validation_class">
  <p id="inline_error">{{inlineErrorMsgs}}</p></span>

TS：

 ifError(){
 var Errormsg:string;
 var br = document.createElement("br");
 for(var i=0;i<this.messages.length;i++){
 Errormsg = this.messages[i]
 this.inlineErrorMsgs = this.inlineErrorMsgs+Errormsg+br;
 }

如何添加新行

【问题讨论】：

标签： html angular dom

【解决方案1】：

将错误消息存储在数组中并使用 ng-for 循环显示它们

【讨论】：

【解决方案2】：

HTML

<div *ngIf="errorMessages && errorMessages.length > 0">
<div *ngFor="let d of errorMessages">
<p>
 {{d}}
</p>
</div>
</div>

export class ComponentA {
errorMessages : [] = [];

someMethod(){
this.messages.forEach((j) => {
// here you can add some logic if you want.
errorMessages.push(j);
})
}

请不要直接使用文档对象，否则我会说尽量避免使用它。

【讨论】：

谢谢，帮了大忙。