角4解析HTML与ngmodel

我有解析在我看来，它有一个使用ngModel例如结合br标记的字符串的一些问题，角4解析HTML与ngmodel

这里是我的字符串

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>

这似乎是打印文本区域内的br标签，但是我想逃跑但我还想在保存对象时保留它们，例如在添加新行时添加标记。我不确定什么最好的选择。

来源

2017-06-01 Ergun Polat

的\n简单的更换你想要的HTML标签是文字区域内可见?,然后当你保存它，它会保存包括'
'标签？你能解释一下你想要做什么吗？ – broodjetom

他们，不，我不希望HTML标签在页面上可见。因此，'
'标签将被转义，用户只会看到一条新的折线，但是当用户添加一条新线时，它会将断线添加到视图中，希望这是有道理的。谢谢 –

我的问题的解决方案是使用一个简单的CSS属性white-space: pre-line;，它保留了文本区域的空格。所以，我的数据被保存为 some text \n\n line break 所以在我的银行，我到底做 

来源

2017-06-10 18:59:25

如果你想将 添加到文本区域值（所以这将是对用户可见），你可以将文本只是添加到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>

在这情况下， 标签将是可见的，因此用户会看到里面的textarea以下值：

李四 123百老汇 12345 NY 美国

如果你希望你的文字是美丽给用户，您可以添加到这个元素的属性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 NY
美国

您还可以使用'和号元素'将括号添加到页面的可视化中，如下所示：

< = <
> = >

我认为这是一个更好的办法，我认为它实际上是一个最佳实践。我希望这能回答你的问题

来源

2017-06-01 17:16:55 broodjetom

感谢您的帮助，但不幸的是，这并没有为我添加，'[innerHTML] =“customer_address”'刚刚返回'吉姆的洗车 街
邮政信箱
英国即使添加'<'不知道为什么这不适合我。 –

如果你使用'[innerHTML]'并且它显示的文字是'< br'，那么你没有实际的括号作为文本，而只有和号元素。如果您将数据放入页面，Angular会自动清理数据，因此您不允许在页面中使用支持脚本的任何元素。如果是'
'，您可以使用它，并且使用'[innerHTML]'应该允许这样做。 – broodjetom

角4解析HTML与ngmodel

回答

相关问题