如何更换角2中的字符串？

我在html页面中使用了下面的插值。如何更换角2中的字符串？

<div>{{config.CompanyAddress.replace('\n','<br />')}}</div>

和也用于

<div>{{config.CompanyAddress.toString().replace('\n','<br />')}}</div>

但两者都示出了如下

{{config.CompanyAddress.replace('\n','<br />')}} 
{{config.CompanyAddress.toString().replace('\n','<br />')}}

来源

2017-01-10 Nimesh Vaghasiya

为此创建管道。 – hgoebl

您可以使用管道的一样：

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({name: 'replaceLineBreaks'}) 
export class ReplaceLineBreaks implements PipeTransform { 
    transform(value: string): string { 
    let newValue = value.replace(/\n/g, '<br/>'); 
    return `${newValue}`; 
    } 
}

管道必须包含在你的@NgModule声明要包含在应用程序。要在您的模板中显示HTML，您可以使用绑定outerHTML。

<span [outerHTML]="config.CompanyAddress | replaceLineBreaks"></span>

来源

2017-01-10 08:38:26

{{}}为串内插，其结果将总是被添加为字符串的文本。由于该表达式中包含<和>，因此绑定在此情况下完全不起作用，因此{{}}未按预期解释。

<div [innerHTML]="replaceLineBreak(config.CompanyAddress) | safeHtml"></div>

与

replaceLineBreak(s:string) { 
    return s && s.replace('\n','<br />'); 
}

应该做你想要什么。如@ hgoebl replaceLineBreak所述，如果您在多个地方需要它，也可以将其实施为管道。

Plunker example

提示：它气馁绑定到直接的方法，因为该方法被调用在每个变更检测周期。纯粹的（默认）管道只有在输入值改变时才被调用。因此管道更高效。

另一种方法是只进行一次替换，并用替换的换行符绑定值，而不是反复调用replaceLineBreak。

提示：您可能希望替换所有换行符，而不是第一个。一。有足够的JS问题解释如何做到这一点，因此我没有打扰。

来源

2017-01-10 07:35:44

如何更换角2中的字符串？

回答

相关问题