angular中用mermaid-js处理异步数据

Question

因此，我正在开展一个项目，我需要从数据库异步获取数据，然后使用该数据使用 mermaid.js 的 markdown 语法绘制序列图。 但我面临的问题是，序列图显然是在初始加载期间在 UI 中呈现的，然后它将图显示为简单的 HTML 内容。 我尝试使用 setTimeOut( )暂停mermaid.initialize() 大约一秒钟，然后执行它，但效果不佳。

但是，如果没有对数据库的后端调用，即数据是硬编码的，那么序列图就可以正常工作。

我还尝试将 startOnLoad 属性保持为 false，但它再次将图表显示为简单的 HTML 内容。

关于如何处理这个特定用例的任何想法？

情况 1：当数据被硬编码时。

.html 文件

<div class="mermaid">
  sequenceDiagram
  {{final}}
</div>

.ts 文件

import { Component, OnInit } from '@angular/core';
import * as mermaid from "mermaid";

@Component({
 selector: 'app-mermaid',
 templateUrl: './mermaid.component.html',
 styleUrls: ['./mermaid.component.css']
})
export class MermaidComponent implements OnInit {

 constructor() { }
 final:string = '';
 items=[
 { 
  source:"1",
  destination:"2",
  message:"Request from 1"
},
{ 
  source:"2",
  destination:"1",
  message:"Response from 2"
 }
]


ngOnInit(): void {
 mermaid.initialize({
  theme: "forest"
}
);

for(let i=0; i<this.items.length; i++) {
  this.final += `Node${this.items[i].source}->>Node${this.items[i].destination}: ${this.items[i].message};`
  }
 }
}

对于这种情况，在 UI 中呈现了一个序列图：

当数据被硬编码时，序列图是这样的。

情况 2：当从数据库接收到数据时。

在这里，我没有从数据库调用数据，而是在我的 ngOnInit() 中简单地创建了一个 setTimeOut，以模仿异步调用。

  ngOnInit(): void {
mermaid.initialize({
  theme: "forest"
}
);
setTimeout(() => {
  for(let i=0; i<this.items.length; i++) {
    this.final += `Node${this.items[i].source}->>Node${this.items[i].destination}: ${this.items[i].message};`
  }
},100)

}

在这里，我得到了一些 svg 错误，我试图用initialize()中的附加属性来解决它，即；

mermaid.initialize({
  theme: "forest",
  startOnLoad: false,
}

但是，这会按原样呈现字符串。 有点像这样。

sequenceDiagram Node1->>Node2: Request from 1;Node2->>Node1: Response from 2;

关于如何解决这个问题的任何想法？

Answer 1

所以，我找到了解决办法。 我使用了mermaid.init() function 和一秒钟的 setTimeOut() 。 它暂时解决了这个问题。

这就是我所做的。

ngOnInit(){
  mermaid.initialize({
    theme: "forest",
    startOnLoad: false,
  }
  );
  setTimeout(() => {
    for(let i=0; i<this.items.length; i++) {
      this.final += `Node${this.items[i].source}->>Node${this.items[i].destination}: ${this.items[i].message};`
    }
  },1000)

   setTimeout(() => {
     mermaid.init()
   },1000)
 }