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)
 }