動的 HTML 文字列での関数の呼び出し
P粉132730839
2023-08-17 10:33:17
<p>アプリケーションに動的 HTML を生成する構造があります。ボタンのある各ユーザー アクションに HTML メンバーを追加します。定義した関数をこれらのボタンの (クリック時) アクションに割り当てたいと考えています。ただし、オンザフライで生成した HTML 文字列内のボタンをクリックすると、関連する関数が定義されていないというエラーが表示されます。私は何をしますか?
私の機能;</p>
<pre class="brush:php;toolbar:false;">returnButtonGroup(key:string):string{
return '<i onclick="testFunc('' key '');" class="fa fa-rench"></i>'
}
testFunc(キー:文字列){
コンソール.ログ(キー);
}</pre>
<p>ユーザーのすべてのアクションに innerHtml を使用して i タグを追加しました。私にできることについて何か提案はありますか?ありがとう。 </p>
バインドされた関数のスコープとコンテキストを考慮することが重要です。
あなたの場合、testFunc 関数は Angular コンポーネントで定義されていますが、生成された HTML 文字列のインライン onclick 属性から呼び出されます。これにより、スコープとコンテキストの問題が発生する可能性があります。
Angular で動的に生成された HTML でイベントと関数を正しくバインドするには、Angular のイベント バインディング メカニズムを使用する必要があります。
生の HTML 文字列の代わりに Angular テンプレート コードを返すように returnButtonGroup 関数を更新します。 Angular の (クリック) イベント バインディングを使用して、testFunc 関数をバインドします。
リーリーHTML で
を使用する リーリーcomponent.ts で、動的に生成された HTML を保持するプロパティを作成し、コンポーネント内で testFunc 関数にアクセスできることを確認します。
リーリー