【问题标题】:How to bind the value (<p>John</p>) to the input of mat form field as John?如何将值 (<p>John</p>) 作为 John 绑定到 mat 表单字段的输入?
【发布时间】:2020-03-19 20:07:15
【问题描述】:

我想对从后端收到的值使用 innerHTML 并将其绑定到 matInput。

这可能吗?

【问题讨论】:

  • 为什么你首先从后端接收 HTML,而不是接收 JSON 格式的结构化数据?你应该解决这个问题,而不是实施肮脏的变通办法。
  • 它是一个结构 json,其中有一个 name 字段。名称字段的值中包含 HTML 标记。我无法控制传入的数据。这只是我在问题中创建的模拟场景。
  • 使用浏览器的 DOM API 从这个 HTML 创建一个元素,然后使用这个相同的 DOM API 从这个元素中提取文本。
  • p.s:在您想到之前,出于安全考虑,请确保您避免使用ViewChild[innerHTML] 等直接在 DOM 中放置值。
  • @JBNizet 你能举个例子吗。

标签: angular typescript angular-material material-ui angular7


【解决方案1】:

Angular 绑定通过在文本中转义 html/script 来保护您免受 XSS 攻击。您需要 DomSanitizer 返回安全的 html 以进行绑定。签出https://angular.io/api/platform-browser/DomSanitizer

【讨论】:

  • 这是我能够使用innerHTML的最后一步。
猜你喜欢
  • 1970-01-01
  • 2022-08-18
  • 2018-11-30
  • 2018-11-06
  • 1970-01-01
  • 2014-12-18
  • 1970-01-01
  • 1970-01-01
  • 2019-10-12
相关资源
最近更新 更多