在動態HTML字串中呼叫函數

Question

我在我的應用程式中有一個結構，我在其中產生動態的html。我在每個使用者操作中新增一個html成員，該成員具有按鈕。我想將我的定義的函數指派給這些按鈕的(onclick)動作。然而，當我點擊我即時產生的html字串中的按鈕時，我會收到相關函數未定義的錯誤。我該怎麼辦？ 我的函數；

returnButtonGroup(key: string):string{
    return '<i onclick="testFunc('' key '');" class="fa fa-wrench"></i>'
}
testFunc(key:string){
    console.log(key);
}

我透過在使用者的每個操作中使用innerHtml來新增i標籤。對我能做什麼有什麼建議嗎？謝謝。

Answer 1

考慮綁定的函數的作用域和上下文是很重要的。

在你的情況下，testFunc函數是在你的Angular元件中定義的，但是它是從產生的HTML字串中的內聯onclick屬性中呼叫的。這可能會導致作用域和上下文問題。

為了在Angular中正確地綁定動態產生的HTML中的事件和函數，你應該使用Angular的事件綁定機制。

將你的returnButtonGroup函數更新為傳回Angular模板程式碼而不是原始的HTML字串。使用Angular的(click)事件綁定來綁定testFunc函數。

returnButtonGroup(key: string): string {
  return `<i (click)="testFunc('${key}')" class="fa fa-wrench"></i>`;
}

在HTML中使用

<div [innerHTML]="dynamicHtml"></div>

在你的component.ts中，建立一個屬性來保存動態產生的HTML，並確保testFunc函數在元件內可存取。

dynamicHtml: string;

constructor() {
  this.dynamicHtml = this.returnButtonGroup('someKey'); // 使用适当的键调用你的方法
}

testFunc(key: string) {
  console.log(key);
}