【发布时间】：2021-12-18 18:13:33
【问题描述】：
我目前正在尝试渲染动态 MathJax 内容：
<div mathjax #math>
$$Weight = {{ mass }} * {{ g }}$$
</div>
这工作正常，直到我在更改一些变量后尝试重新渲染。因此，例如，如果我改变了质量，那么我希望上面 HTML 中的值也会改变。
为此，我需要对 MathJax 指令的实例执行 MathJaxTypeset() 调用，以便按照 ngx-mathjax github page 上的说明：
我使用 viewchild 来获取页面上的实例...
@ViewChild('math', { static: false, read: MathJaxDirective }) mathsExpressions?: MathJaxDirective;
然后在它们需要更新时对其运行 MathJaxTypeset()...
makeNewValues(): void {
this.mathsExpressions.MathJaxTypeset();
}
但是这会产生错误...
ERROR TypeError: Cannot read properties of undefined (reading 'MathJaxTypeset')
我在指令的使用和操作方面没有经验，因此不确定我如何以及为什么会收到错误。如果似乎无法找到要排版的实例，我认为问题出在 viewchild 中。
更新
这是一个 stackblitz 使用较新的模块 mathjax-angular。您会注意到模板中有三行代码显示了 mathjax 样式值。前两个：
<div [mathjax]="displayString"></div>
<div [mathjax]>{{ displayString }}</div>
两者都在运行时工作，并且看起来相同，但只有顶部的在值更新时会重新呈现。这不太理想，因为这意味着将文档的内容分成 .ts 和 .html 文件，然后在更新任何值时使用 mathjax 代码手动更新字符串。
第三次供品：
<div [mathjax]>$$Random = {{ randomNumber }}$$</div>
在我的代码中渲染，但不在 stackblitz 上 - 样式或依赖项之间没有区别。 SB 上的 Angular 是 v12，我使用的是 v13，但这是唯一的区别。如果这渲染得当，那正是我想要的……
我想要的是在更新值时更新 HTML（第三行）中的内联代码。
已经尝试过
SO 上的大部分内容似乎与 AngularJS 相关或不特定于 ngx-angular，但 this thread on SO 似乎是同样的问题。然而，该解决方案并没有改变我自己的代码。
app.module.ts
在我的 app.module.ts 我有：
MathJaxModule.forRoot()
【问题讨论】：