[英]Angular 4 parsing html with ngmodel
I am having some an issue with parsing a string in my view which has br
tags that is bound using ngModel
for example, 我在解析包含
ngModel
绑定的br
标签的视图中的字符串时遇到一些问题,例如,
Here is my string 这是我的绳子
this.customer_address = this.customer.customer_name + '<br>' +
this.customer.address.street + '<br>' + this.customer.address.postcode + '<br>' + this.customer.address.country;
and here is what I have in my HTML, 这就是我的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>
This seems to print the br
tags within the textarea however I would like to escape them but I would also like to keep them when I am saving the object for example, when a new line is added I a br
tag is added. 这似乎在textarea中打印
br
标签,但是我想转义它们,但是在保存对象时也想保留它们,例如,当添加新行时,我添加了br
标签。 I am not sure what best options. 我不确定什么是最佳选择。
In case you want to add the <br>
to the text area value (so it will be visible to the user) you can just add the text to the inside of the textarea element: 如果您想将
<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>
In this case, the <br>
tags will be visible so the user will see the following value inside the textarea: 在这种情况下,
<br>
标记将可见,因此用户将在文本区域内看到以下值:
John Doe <br> 123 Broadway <br> 12345 NY <br> USA
约翰·杜(John Doe)<br>百老汇(123 Broadway)<br> 12345纽约<br>
In case you want your text to be beautiful to the user, you can add this to the property innerHTML
of the element. 如果希望您的文本对用户来说很漂亮 ,可以将其添加到元素的属性
innerHTML
中。 So you could do the following: 因此,您可以执行以下操作:
<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>
In this case the address is compiled as HTML and will look as follows: 在这种情况下,该地址将编译为HTML,如下所示:
John Doe
约翰·杜
123 Broadway百老汇大街123号
12345 NY纽约州12345
USA美国
You can also add the brackets to the visual of a page by using the 'ampersand element' like follows: 您还可以使用“&元素”将括号添加到页面的外观中,如下所示:
<
= <
=
<
>
= >
=
>
I think this is a better way and I think it is actually a best practice. 我认为这是一种更好的方法,并且我认为这实际上是一种最佳实践。 I Hope this answers your question
我希望这回答了你的问题
The solution to my problem was to use a simple CSS property of white-space: pre-line;
解决我的问题的方法是使用
white-space: pre-line;
的简单CSS属性white-space: pre-line;
which preserves the white spaces on the text area. 保留文本区域上的空白。 So my data is saved as
some text \\n\\n line break
so in my bank-end I do a simple replace of \\n
with <br/>
因此我的数据被保存为
some text \\n\\n line break
所以在我的银行端,我用<br/>
简单替换\\n
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.