Hacktoberfest 2026:維護者為十月標記出來的 issue,仍然開放、適合新手。 瀏覽 Hacktoberfest issue

Render unsafe latex html string using Html View

未關閉
#138 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

評估

難度
4/5
預估耗時
3-5 天
新手友好度
28/100
Issue 類型
缺陷
描述清晰度
需要釐清
活躍度
停滯
技術堆疊
angular, typescript
領域
mobile-dev

研究方向

從 HtmlView 的 html 屬性和 Angular [html] binding 路徑開始;報告中的失敗是傳入 DomSanitizer 的信任值時出現 value.search is not a function。使用提供的 KaTeX HTML 重現問題,並透過在沒有例外或安全值警告的情況下進行 render,同時保留預期的標記,來確認完成。

由索引模型根據 Issue 內容生成。

描述

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

  • CLI: "@angular/compiler-cli": "~18.0.0",
  • Cross-platform modules:
  • Android Runtime: "@nativescript/android": "8.8.1-next.2024-07-19-10014251437",
  • iOS Runtime:
  • Plugin(s): "katex": "^0.16.11",, "@types/katex": "^0.16.7",
  • NativeScript-Angular: "@nativescript/angular": "^18.0.0",
  • Angular: "@angular/core": "~18.0.0",

Describe the bug

I created unsafe html string using

this._safeHtml = this.domSanitizer.bypassSecurityTrustHtml(htmlString);

Attempting to render this content using Html View using property binding like so

<HtmlView [html]="_safeHtml"></HtmlView>

results to the following error

An uncaught Exception occurred on "main" thread.
Calling js method onCreateView failed
TypeError: value.search is not a function

StackTrace:
[html:setNative]...

NB:

  • Using the approach below:
    <HtmlView html="{{_safeHtml}}"></HtmlView>

does not render the string(latex string) as expected and also throws a safevalue must use [property]=binding error on the screen.

  • The string renders as expected in pure angular project using the following code:
    <div [innerHTML]="_safeHtml"></div>

A sample string to be rendered looks like so
<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>s</mi><mi>u</mi><msubsup><mi>m</mi><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></msubsup><mo stretchy="false">(</mo><msubsup><mi>x</mi><mi>i</mi><mn>2</mn></msubsup><mo>−</mo><mi>o</mi><mi>v</mi><mi>e</mi><mi>r</mi><mi>l</mi><mi>i</mi><mi>n</mi><mi>e</mi><msup><mi>x</mi><mn>2</mn></msup><mo stretchy="false">)</mo></mrow><annotation encoding="application/x-tex">sum_{i=1}^n(x_i^2 - overline{x}^2)</annotation></semantics></math></span>

What could be a recommended way to solve this situation or a walkaround?

To Reproduce

Expected behavior

Sample project

Additional context

主要語言
TypeScript
星號
55
分支
13
平均合併
16 分鐘
30 天內合併 PR
1

貢獻指南

開啟貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

NativeScript/angular 的其他 Issue

查看 NativeScript/angular 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。