需求

把接口返回的使用說明字符串innerHTML出來；

本來想直接? [innerHTML] 就可以了，但是事不遂人愿，那就寫個pipe過濾一下；

過程

// 接口返回字符串：// "couponRule": "使用說明：\n 1. 每人限領(lǐng)1張，僅限到店使用\n2. 到店時請向服務(wù)顧問出示優(yōu)惠券用于核銷；\n3. 優(yōu)惠體驗需一次性完成，請在有效期內(nèi)使用，逾期失效。\n*優(yōu)惠券領(lǐng)取時需填寫手機(jī)號獲取驗證碼，領(lǐng)取完成后請到我的-個人中心-我的錢包確認(rèn)是否領(lǐng)取成功。"// 3種情況<p>{{couponValid.couponRule}}</p><p [innerHTML]="couponValid?.couponRule |zConvertText | safeHtml"></p><p [innerHTML]="couponValid?.couponRule |hDataBr |zConvertText | safeHtml"></p>

結(jié)果：

?

過濾器

/*** Created by Echo_hx on 2021/05.* 把字符串里的 /n 替換成 <br/>*/ import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'hDataBr'}) export class DataBrPipe implements PipeTransform {transform(value: any) {return value.replace(/\n/g,'<br/>');}}

?

?

總結(jié)

以上是生活随笔為你收集整理的Angular2 - [innerHTML] pipe(把字符串里的 /n 替换成 ＜br/＞)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。