angular2如何识别字符串中的html标签,并按照html来显示视图

2023-05-16

这个源于一个需求:从后台拿到用户评论的内容,该内容是字符串的,但是里面包含了html代码。要求显示的时候按照html来显示,不是按照字符串来显示。并且要求任意的段文字添加样式;

思路:用属性绑定的方法来innerHTML;将从后台拿到的字符串放在一个变量里面,用属性绑定[innerHTML]="aa",aa为存储字符串的变量

任意字符串添加样式:

先把预先的样式写在css里面,在评论的时候带着指定的标签输入,再按照html显示

例子:

ts:


  

import { Component } from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {questionnaireService} from "../questionnaireService";

@IonicPage({
    name:'Questionnairepart1Page',
    segment:'Questionnairepart1Page/:strAccountNO/:strTypeID/:strDeviceID'
})
@Component({
    selector: 'page-Questionnairepart1Page',
    templateUrl: 'Questionnairepart1.html',
    providers: [questionnaireService]
})
export class Questionnairepart1Page {
  
    public text:string="<B>我是标题</B>";
    public aa:any[]=["<B>我是标题</B>","我是标题<span>我要变红</span>","<strong>我是标题</strong>","<h3>我是标题</h3>","<i>我是标题</i>","<div style='border:1px solid red'>我是标题</div>","<p>我是标题</p>","<h5>我是标题</h5>","<B>我是标题</B>","<B>我是标题</B>","<B>我是标题</B>"]
   constructor(public navCtrl: NavController,
               public navParams: NavParams,
               public QService:questionnaireService){

   }
    ionViewDidLoad() {
      
    }
   
}  

  
html:


[innerHTML]="judge[i]"  


<ion-navbar color="dark" hideBackButton="true">
    <ion-title>
        问卷模板1
    </ion-title>
</ion-navbar>

<ion-content >
{{text}}
    <p id="text"></p>

    <p escape="false">{{text}}</p>
    <p *ngFor="let a of aa;let i=index">
        <span class="red" [innerHTML]="aa[i]"></span>
    </p>

</ion-content>
css:


.red{
  span{
    color: red;
  }
}  

效果:


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

angular2如何识别字符串中的html标签,并按照html来显示视图 的相关文章

随机推荐

  • 多线程编程以及线程池相关记录

    Java 中经常需要用到多线程来处理一些业务 xff0c 非常不建议单纯使用继承Thread或者实现Runnable接口的方式来创建线程 xff0c 那样势必有创建及销毁线程耗费资源 线程上下文切换问题 同时创建过多的线程也可能引发资源耗尽
  • Spring Application Context 注入问题

    熟悉spring bean生命周期的都知道 xff0c 在其生命周期中有个很重要的接口 xff1a Aware 如果要注入application xff0c 可以用如下方式 64 Component public class SpringC
  • 解决我遇到的apt-get ,(Depends: AAA(>= BBB)but it is not going to install)的问题

    因为我直接把ubuntu16的源复制给了18的系统 xff0c 报错 xff0c 网上查说要换源我没懂啥意思 原来每个版本的源不一样 xff0c 这里贴一下清华的16和18的源 修改源文件source list xff08 1 xff09
  • IIS 网页在每天第一次打开慢的原因及解决

    今天碰到一个问题 xff0c 我们的网页在早晨的时候打开总是很慢 xff0c 其它时间有时也比较慢 开始认为是服务器性能的问题 xff0c 监测服务器资源使用后 xff0c 发现服务器的资源没有在高水平运行 xff0c 可以确定不是服务器硬
  • 【考研】操作系统——高速缓存与缓冲区、设备分配的数据结构

    一 磁盘高速缓存 操作系统中使用磁盘高速缓存技术是指利用内存中的存储空间来暂存从磁盘中读出的一系列盘块中的信息 xff0c 用以提高磁盘的 I O 速度 xff0c 对高速缓存复制的访问要比原始数据访问更为高效 二 缓冲区 xff08 一
  • Linux 系统的centos8安装jdk 1.8 教程

    卸载openjdk 查看rpm qa grep jdk 卸载yum y remove java 1 7 0 openjdk 1 7 0 75 2 5 4 2 el7 方法一 安装包手动安装 1 下载并上传 官网下载 我的备份 将我们下载好的
  • 解决Matlab2014A在win10下字体模糊的问题

    右击快捷方式 xff0c 进入属性设置 兼容性 更高高DPI设置 高DPI缩放替代 打钩 xff0c 下拉菜单选择应用程序
  • android工程师开发IOS oc浅析(14)之MRC与ARC

    1 为什么要进行内存管理 管理的是什么 内存管理 管理的是任何继承自NSObject的对象 因为一般的其他基本数据类型的局部变量都是储存在栈区的 当代码块执行结束 代码块中的局部变量出作用于就会被回收 而OC对象则不一样 OC对象类型是程序
  • Github个人主页绑定域名实操

    由于笔者在上传文件到github仓库 xff0c 由于相关操作经常会间歇性遗忘 xff08 还是不够熟悉惹的祸啊 xff09 xff0c 或者部分解决方案里并没有明确说明指令所表示的含义 xff0c 所以在百度了许多许多的相关文章和blog
  • spring 注解作用与解析过程

    64 PostConstruct 作用 xff1a 初始化方法之前执行 xff0c 作用于方法 xff0c 无方法上修饰符限制 解析过程 xff1a CommonAnnotationBeanPostProcessor xff08 BeanF
  • 关于Goland调试不可以使用

    今天在使用Goland时发现Goland断点调试无法使用 如下图所示 在找了半天之后在某论坛找到了原因 结果是360把Go的程序截拦导致无法断点调试 关闭360 重新打开文件即可使用
  • MySQL导入含有触发器的sql脚本报错解决方案

    报错码 ERROR 1419 HY000 You do not have the SUPER Privilege and Binary Logging is Enabled 解决方案 1 Linux下执行sql脚本 我们一般在linux服务
  • maven 本地仓库的配置以及如何修改默认.m2仓库位置

    本人转载于http blog csdn net qq 27093465 article details 52957253 以下为转载内容 xff1a 本地仓库是远程仓库的一个缓冲和子集 xff0c 当你构建Maven项目的时候 xff0c
  • onNewIntent 作用

    当Activity启动模式为singleTask时 如果在栈中已经有该Activity的实例 xff0c 就重用该实例 会调用实例的onNewIntent 不会调用onCreate方法 重用时 xff0c 会让该实例回到栈顶 xff0c 因
  • xml与txt文件格式互换

    当前遇到一个问题 xff0c 需要将txt格式的文件转换为xml格式的文件 xff0c 网上找了挺多的方法 xff0c 也成功了 但用时比较麻烦 xff0c 考虑到后期程序的需要 xff0c 决定开发一个小程序 耗时两个半天 xff0c 终
  • Spring中自定义注解的解析过程-学习

    Spring中自定义注解的解析过程 学习 在学习spring源码的过程中 xff0c 最好奇的一件事就是Sprint的注解是怎么被读取到的 xff0c 又是怎么进行解析的 然后又是怎么将注解的内容注入到spring容器中的 带着这个好奇心
  • [RK3399][Android7.1] 调试笔记 --- 移除/删除Settings的Preference的三种方法小结

    Platform RK3399 MID OS Android 7 1 2 Kernel v4 4 83 需求 xff1a 整理一下移除 删除Settings的Preference三种方法 xff1b 方法一 xff1a 对于 Prefere
  • windows server 2008 R2服务器系统密码破密

    问题 xff1a 管理员administrator密码忘记 前提 xff1a 服务器型号Dell S130 2 系统2008R2 3 系统带有阵列驱动 准备工具 xff1a 1 2008R2系统光盘 xff0c 2016 R2系统光盘 2
  • Java 经典例题:生产者/消费者问题

    Java 经典例题 xff1a 生产者 消费者问题 1 问题2 分析3 demo 1 问题 生产者 Productor 将产品交给店员 Clerk xff0c 而消费者 Customer 从店员处取走产品 xff0c 店员一次只能持有固定数
  • angular2如何识别字符串中的html标签,并按照html来显示视图

    这个源于一个需求 xff1a 从后台拿到用户评论的内容 xff0c 该内容是字符串的 xff0c 但是里面包含了html代码 要求显示的时候按照html来显示 xff0c 不是按照字符串来显示 并且要求任意的段文字添加样式 xff1b 思路