如何在角度2中替换字符串？

我在html页面中使用了以下插值.

{{config.CompanyAddress.replace('\n','
')}}

并且也使用了

{{config.CompanyAddress.toString().replace('\n','
')}}

但两者都显示如下文字

{{config.CompanyAddress.replace('\n','
')}}
{{config.CompanyAddress.toString().replace('\n','
')}}

Siddharth Sh.. 20

您可以使用相同的管道:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'replaceLineBreaks'})
export class ReplaceLineBreaks implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\n/g, '
');
  }
}

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

Günter Zöchb.. 12

{{}}用于字符串插值,结果将始终作为字符串添加.绑定不在这种情况下因为在所有的工作<,并>包含在表达式中,{{}}不按预期进行解释.

同

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

应该做你想做的事.正如@hgoebl所提到的replaceLineBreak那样,如果您需要在多个地方使用它,也可以实现为管道.

Plunker的例子

提示:不鼓励直接绑定到方法,因为在每个更改检测周期都会调用该方法.仅在输入值更改时才会调用纯(默认)管道.因此管道更有效.

另一种方法是只进行一次替换,并使用替换的换行符绑定到值,而不是replaceLineBreak重复调用.

提示:您可能想要替换所有换行符,而不仅仅是第一行换行符.一.有足够的JS问题解释如何做到这一点,因此我没有打扰.

您可以使用相同的管道:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'replaceLineBreaks'})
export class ReplaceLineBreaks implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\n/g, '
');
  }
}

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

{{}}用于字符串插值,结果将始终作为字符串添加.绑定不在这种情况下因为在所有的工作<,并>包含在表达式中,{{}}不按预期进行解释.

同

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

应该做你想做的事.正如@hgoebl所提到的replaceLineBreak那样,如果您需要在多个地方使用它,也可以实现为管道.

Plunker的例子

提示:不鼓励直接绑定到方法,因为在每个更改检测周期都会调用该方法.仅在输入值更改时才会调用纯(默认)管道.因此管道更有效.

另一种方法是只进行一次替换,并使用替换的换行符绑定到值,而不是replaceLineBreak重复调用.

提示:您可能想要替换所有换行符,而不仅仅是第一行换行符.一.有足够的JS问题解释如何做到这一点,因此我没有打扰.