需求

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

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

過程

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

結果：

?

過濾器

/*** 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/>');}}

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。