在angular项目中使用美人鱼

Question

我是美人鱼的初学者，我正在尝试在我的 angular 项目中使用美人鱼。 我将它添加到我的 html 中并且它可以工作。

 <div class="mermaid" id="mermaidHTML"> stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] </div>

但现在我想在.ts文件中编辑或制作一个新的美人鱼并将其显示在我的浏览器中，但我不知道该怎么做。 我尝试使用.innerHTML 和.innerText 来编辑美人鱼文本，但没有成功。

Answer 1

我通过制作 function 来创建美人鱼图而不是编辑前一个来解决此问题。 我将此添加到 my.ts 文件中。

 stringFlowChart: any = []; createFlowchart() { this.flowChart = [ "stateDiagram-v2 [*] --> still still --> [test]", "stateDiagram-v2 [*] --> still still --> [*]", "stateDiagram-v2 [*] --> still" ]; //or use a loop this.stringFlowChart[0] = this.flowChart[0]; this.stringFlowChart[1] = this.flowChart[1]; this.stringFlowChart[2] = this.flowChart[2]; }

在我的 html 代码中，我添加了这个：

 <div style="margin-top: 50px"> <div *ngFor="let flow of stringFlowChart; let i = index"> index is:{{i}} <div class="mermaid"> {{ flow }} </div> </div> </div>

这样，我添加了一组美人鱼图