ホームページ  >  に質問  >  本文

動的 HTML 文字列での関数の呼び出し

<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粉132730839P粉132730839429日前493

全員に返信(1)返信します

  • P粉551084295

    P粉5510842952023-08-18 09:45:50

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

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

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

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

    リーリー

    HTML で

    を使用する リーリー

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

    リーリー

    返事
    0
  • キャンセル返事