Angular 4使用ngmodel解析html

Question

我在解析包含ngModel綁定的br標簽的視圖中的字符串時遇到一些問題，例如，

這是我的繩子

this.customer_address = this.customer.customer_name + '<br>' +
        this.customer.address.street + '<br>' + this.customer.address.postcode + '<br>' + this.customer.address.country;

這就是我的HTML中的內容

 <md-input-container class="example-full-width">
        <textarea [readonly]="invoice.lock || invoice.lock_archive" mdInput placeholder="Billing Address" name="address" [(ngModel)]="customer_address">

        </textarea>
      </md-input-container>

這似乎在textarea中打印br標簽，但是我想轉義它們，但是在保存對象時也想保留它們，例如，當添加新行時，我添加了br標簽。 我不確定什么是最佳選擇。

Answer 1

如果您想將<br>添加到文本區域值（以便用戶看到），可以將文本添加到textarea元素的內部：

<md-input-container class="example-full-width">
    <textarea [readonly]="invoice.lock || invoice.lock_archive" mdInputplaceholder="Billing Address" name="address" [(ngModel)]="customer_address">
        {{customer_address}}
    </textarea>
  </md-input-container>

在這種情況下， <br>標記將可見，因此用戶將在文本區域內看到以下值：

約翰·杜（John Doe）<br>百老匯（123 Broadway）<br> 12345紐約<br>

to the user, you can add this to the property innerHTML of the element. 如果希望您的文本對用戶來說很 ，可以將其添加到元素的屬性innerHTML中。 因此，您可以執行以下操作：

<md-input-container class="example-full-width">
    <textarea [readonly]="invoice.lock || invoice.lock_archive" mdInputplaceholder="Billing Address" name="address" [(ngModel)]="customer_address" [innerHTML]="customer_address">

    </textarea>
  </md-input-container>

在這種情況下，該地址將編譯為HTML，如下所示：

約翰·杜
百老匯大街123號
紐約州12345
美國

您還可以使用“＆元素”將括號添加到頁面的外觀中，如下所示：

< = <
&gt; = >

我認為這是一種更好的方法，並且我認為這實際上是一種最佳實踐。 我希望這回答了你的問題

Answer 2

解決我的問題的方法是使用white-space: pre-line;的簡單CSS屬性white-space: pre-line; 保留文本區域上的空白。 因此我的數據被保存為some text \\n\\n line break所以在我的銀行端，我用<br/>簡單替換\\n