Question

我正在使用Angular 5，并且从Rest API调用获得以下JSON响应。我能够在组件中的变量内获取dest键的值。我想在视图中使用HTML。但是，由于它不是有效的HTML，因此我想将info替换为\"：

我该怎么做？我应该用html还是打字稿来做？

Answer 1

为此使用collision_ration。

.replace("'\'")

Answer 2

只需使用[innerHTML]：

<div [innerHTML]="res"></div>

在TypeScript类中：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ...
  res = "<p><div class=\"abc\">xyzdef</div><span class=\"egg\"></span></p>";
  ...
}

这是您推荐的Sample StackBlitz。

Answer 3

无需更换任何正常工作的东西。组件代码为

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = "<p><div class=\"abc\">xyzdef</div><span class=\"egg\"></span></p>";
}

html代码是

<div [innerHTML]="title"></div>

Angular中的字符串替换

3 个答案: