動的 HTML 文字列での関数の呼び出し
P粉132730839
P粉132730839 2023-08-17 10:33:17
0
1
532
<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>
P粉132730839
P粉132730839

全員に返信(1)
P粉551084295

バインドされた関数のスコープとコンテキストを考慮することが重要です。

あなたの場合、testFunc 関数は Angular コンポーネントで定義されていますが、生成された HTML 文字列のインライン onclick 属性から呼び出されます。これにより、スコープとコンテキストの問題が発生する可能性があります。

Angular で動的に生成された HTML でイベントと関数を正しくバインドするには、Angular のイベント バインディング メカニズムを使用する必要があります。

生の HTML 文字列の代わりに Angular テンプレート コードを返すように returnButtonGroup 関数を更新します。 Angular の (クリック) イベント バインディングを使用して、testFunc 関数をバインドします。

リーリー

HTML で

を使用する リーリー

component.ts で、動的に生成された HTML を保持するプロパティを作成し、コンポーネント内で testFunc 関数にアクセスできることを確認します。

リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート