他のコンテンツと innerHTML を同時に表示する

Question

次のような、渡されたデータに基づいてラベルをレンダリングするコンポーネントがあります。 リーリー

必要に応じて各テキストの横にアイコンをレンダリングしたいと考えています。

リーリー

各タグの間にアイコンタグを入れると、innerHTMLデータに置き換えられます。

アイコン (すべての要素にアイコン HTML を書きたくないので、ng-content などを使用) と innerHTML データをレンダリングする方法はありますか?

私は Angular の世界に慣れていないので、学ぼうとしています。ご協力をいただければ幸いです。

＃＃＃ありがとう。

Answer 1

あなたの問題は Angular に固有のものではなく、JavaScript の動作にあるようです。

innerHTML 要素に含まれる HTML または XML タグを取得または設定します。つまり、最初から存在していたものを置き換えるということです。 (https://developer.mozilla.org/en-US /docs/Web/API/Element/innerHTML)

代わりに insertAdjacentHTML() を使用してみてもよいと思います。これにより、既に DOM 内にある要素に HTML が追加されます。 ここで構文と例を確認してください: https://developer.mozilla .org/en-US/docs/Web/API/Element/insertAdjacentHTML