在 ngFor Angular (2/4/5) 中使用 MathJax

Question

所以，我一直在尝试使用 MathJax 在 Angular 4 应用程序上呈现数学方程式。一切正常，直到我不得不渲染单一方程式。但是现在我需要渲染来自 API.

的大约 4 个方程式

现在，在 ngFor 中使用 MathJax 仅适用于数组中的第一个对象，但不适用于之后的对象。请参阅下面的屏幕截图：

我的 HTML 看起来像这样：

<div class="card">
    <div class="card-header">
        //question HTML
    </div>
    <div *ngFor="let answer of model.question?.options">
        <span class="answers" #answers>{{answer?.text}}</span>
    </div>
</div>

而且，组件如下所示：

@ViewChild('equation') equation: ElementRef;

MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.equation.nativeElement]);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.answers.nativeElement]);

Answer 1

尝试：

<div class="card">
    <div class="card-header">
        //question HTML
    </div>
    <div *ngFor="let answer of model.question?.options">
        <span class="answers">{{answer?.text}}</span>
    </div>
</div>

@ViewChild('equation') equation: ElementRef;

MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.equation.nativeElement]);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementsByClassName("answers")]);

'# sintaxis 是独一无二的。

在 ngFor Angular (2/4/5) 中使用 MathJax

Use MathJax in ngFor Angular (2/4/5)

javascript

mathjax

typescript

angular