在 typescript (Angular) 中添加新行

Question

我正在嘗試在模板的字符串中顯示一個新行。 由於某種原因，新行被忽略了。 <br/>不起作用， \n也不起作用。

這是我的 function：

this.errorsString = '';
this.validateData();
for ( var i = 0; i < this.errors.length; i++){
    this.errorsString += `${this.errors[i]}` +'<br/>'
    console.log(this.errors[i])
}

html：

<div *ngIf="errorsString" >
    <div class="redError">
        {{ errorsString }}
    </div>
</div>

Answer 1

嘗試使用 innerHTML 在 html 文檔上編寫 html：

<div *ngIf="errorsString">
  <div class="redError" innerHTML="{{ errorsString }}">
  </div>
</div>

Answer 2

您可以簡單地在“p”元素上使用 ngFor。 如果您有一個錯誤列表，您可以在組件模板中使用 ngFor 在段落上迭代它們並相應地換行。

app.component.ts

// An array that contains all errors which can also be filled up later, just an example
public errors = ['error1', 'error2', 'error3'];

app.component.html

<div *ngIf="errors.length != 0">
    <div class="red-error">
        <p *ngFor="let error of errors">{{ error }}</p>
    </div>
</div>

Answer 3

只需使用 '<br />' 加入項目並使用 innerHtml

  public errors = ["error1", "error2", "error3"];
  errorsString = this.errors.length > 0 ? this.errors.join("<br />") : null;

在您的 html

<div *ngIf="errorsString">
  <div class="redError" innerHTML="{{ errorsString }}">
  </div>
</div>

在此處查看演示