問題タブ [angular10]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

853 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
1 に答える
4898 参照

angular - Angular [innerHTML] で TrustedHTML 割り当てエラーを修正する方法

(私の問題は'This document requires 'TrustedHTML' assignment' in chrome というエラーが発生することに関連しているようですが、代わりに Angular v10 を使用しています)

説明：

[innerHTML]="myVar"厳密な CSP を使用して Angular 10 (またはそれ以下) のプロジェクトでディレクティブを使用すると、次require-trusted-types-for 'script';のメッセージで失敗します。

このドキュメントには「TrustedHTML」の割り当てが必要です。エラー TypeError: 'Element' に 'innerHTML' プロパティを設定できませんでした: このドキュメントには 'TrustedHTML' の割り当てが必要です。

再現方法:

  • Angular X プロジェクトを開く
  • [innerHTML]="someVar"テンプレートでディレクティブを使用する
  • require-trusted-types-for 'script';CSP ヘッダーを追加する
  • Chrome コンソールを確認してください ;)

私が試したこと：

信頼できるタイプに関するいくつかのソースを読んだ後、次のようになります。

Angular プロジェクトでhttps://github.com/cure53/DOMPurifyを使用しようとしました。パッケージを追加し、Angular パイプを作成して、テンプレートで使用するだけです。

パイプは、次のコードを使用して作成できます。

そして、次のように使用できます。[innerHTML]="myVar | safeHtml"

もちろん、戻り値を でチェックしたconsole.logところ、本物の TrustedHTML オブジェクトが得られました。Chrome コンソールに新しいエラーが表示されたため、DOMPurify を承認するために新しい CSP ヘッダーを追加する必要がありました。

require-trusted-types-for 'script';trusted-types dompurify

その後、Chrome は DOMPurify 文字列操作を確認して満足しました。

しかし、初期エラーが再発！

何を見逃したのか理解できません - innerHTML 呼び出しの TrustedHTML タイプに関する Chrome の苦情のため、TrustedHTML 変換を行います。その後、Chrome は dompurify の明示的な承認を求めているので、それを行います。その後、Chrome は TrustedHTML タイプについて再び苦情を言います...

0 投票する
1 に答える
693 参照

html-table - Angular プロジェクトでマット テーブルまたは cdk テーブルを作成する際のエラー

angular アプリケーションでマテリアル テーブルを使用したいと考えています。テーブルを使用するための資料の公式ドキュメントを調べました。しかし、私はその中でいくつかのエラーに直面しました。

これは私のコンポーネントコードです:

これは私のインポートフォルダーです:

エラーのスクリーンショット

必要なモジュールをすべてインポートし、最新のマテリアルと角度バージョンを使用しています。それでも私はそれを得ることができません。誰かがこのエラーを取り除く方法を教えてもらえますか?


12345678910