エラーTS2304:角度5の要素に$が見つかりません

こちらのように、クリックすると拡大する角度成分のサイドナビバーがあります。ナビゲーションバーの作成に使用されるHTMLスニペットは次のとおりです。

HTML:

名前( openNav())が示すように、次のHTMLコードはナビゲーションバーを拡張します

<div>
    
</div>

そして、次のHTMLコードはナビゲーションバーを閉じます

<div id="mySidenav" class="sidenav">
    
</div>



Typescript:

使用されているタイプスクリプトは次のとおりです。

openNav() 
 {
     $("#mySidenav").css("width", "50%");  //Line A
 }

 closeNav() 
 {
    $("#mySidenav").css("width", "0%");  //Line B
 }

上記のタイプコードは ngOnInit()関数には含まれていません。




Problem Statement :

コマンドプロンプトで ng serve を実行するとすぐに、次のようなエラーメッセージが表示されます。

エラーTS2304:名前 '$'が見つかりません。


The $ represents the lines (Line A and Line B in the typescript above) inside openNav() and closeNav() functions above in the typescript.

そのエラーの背後にある主な理由は何でしょうか。

5
下記のように、 Oscar が私に勧めてくれた後、 npm install @ types/jquery --save-dev を行いました。私はもっ​​と何をする必要があるのか​​疑問に思います。
追加された 著者 flash,
下記のように、 Oscar が私に勧めてくれた後、 npm install @ types/jquery --save-dev を行いました。私はもっ​​と何をする必要があるのか​​疑問に思います。
追加された 著者 flash,
@NehaTawarファイルの一番上に、 "JQuery"から import $ をインポートしてもよろしいですか。右 ?
追加された 著者 flash,
@NehaTawarもうそこにあります。この行を使うことで、ときどきエラーになりますが、しないこともあります。
追加された 著者 flash,
@Neha Tawar特別な理由はありますか、なぜエラーが発生するのか、それともそうならないのですか?
追加された 著者 flash,
このファイルは、すべてのコンポーネントがアプリフォルダ内にある場合に使用されます。どのフォルダで自分のjqueryを見ることができるのでしょうか。最初に実行されたのはどのように確認できますか?
追加された 著者 flash,
@NehaTawarあなたは周りにいますか?
追加された 著者 flash,
@NehaTawar私はそこに答えました。 "JQuery"から import $ をインポートする場所を教えてください。インポートする必要がある特定のファイルはありますか?
追加された 著者 flash,
追加された 著者 flash,
@JimiPajala今後のためにこれを覚えておくでしょう。しかし、現時点で、そのエラーを解決できますか?
追加された 著者 flash,
@JimiPajala今後のためにこれを覚えておくでしょう。しかし、現時点で、そのエラーを解決できますか?
追加された 著者 flash,
はいこれがあなたのエラーを解決するかどうか試してみてください
追加された 著者 Neha Tawar,
jqueryを使いたい各ファイルでは、 "JQuery"から$をインポートして medium.com/@NetanelBasal/…
追加された 著者 Neha Tawar,
タイプスクリプトファイルの declare var $:any の先頭にあるこの行を試してください。
追加された 著者 Neha Tawar,
こんにちは私は議論に答えましたコメントを見て、あなたに何か問題があるかどうか教えてください。
追加された 著者 Neha Tawar,
jqueryがインポートされて$がその値を取得する前に、$を使用したファイルが実行されている可能性があります。物事が解釈されているフロー/順序を確認してください。
追加された 著者 Neha Tawar,
$ markを使ったjQueyまたはJQueryの名前を使ってみてください。そうでなければ、これが単なるリンターエラーであれば、tsconfigで$ markをグローバルとして宣言します。
追加された 著者 Jimi Pajala,
jqueryを使わないでください。あなたはすでに素晴らしいコンポーネントベースのライブラリをすでに使用していますが、その機能を使用するだけで、パフォーマンスが大幅に向上します。
追加された 著者 Jimi Pajala,
npmjs.com/package/@types/jquery あなたのパッケージにこれがありますか.json?
追加された 著者 Jimi Pajala,
npmjs.com/package/@types/jquery あなたのパッケージにこれがありますか.json?
追加された 著者 Jimi Pajala,
$ markを使ったjQueyまたはJQueryの名前を使ってみてください。そうでなければ、これが単なるリンターエラーであれば、tsconfigで$ markをグローバルとして宣言します。
追加された 著者 Jimi Pajala,
jqueryを使わないでください。あなたはすでに素晴らしいコンポーネントベースのライブラリをすでに使用していますが、その機能を使用するだけで、パフォーマンスが大幅に向上します。
追加された 著者 Jimi Pajala,

7 答え

I assume that $ is jQuery. You must add jQuery to your dependencies and imported it in the file where you're using it. I'd suggest also adding the type definitions for jQuery: npm install @types/jquery --save-dev

他の方法でjQueryをインポートしている場合は、型を追加するだけです。

1
追加された
追加された 著者 flash,
何らかの理由があります、なぜ私はまだ同じエラーを受けているのですか?
追加された 著者 flash,
今チェックしました、はい、持っています
追加された 著者 flash,
この npm install @ types/jquery --save-dev を実行した後、このメッセージが 53個のパッケージに69個のパッケージが追加されていますが表示されます
追加された 著者 flash,
node_modulesパスに npm install @ types/jquery --save-dev を実行する必要がありますか?
追加された 著者 flash,
私はこの行で確信がありません。あなたはそれについてもっと詳しく述べることができますか?
追加された 著者 flash,
npm install @ types/jquery --save-dev を実行する必要がある場所を確認するだけですか。 node_modulesがインストールされているパスにありますか?
追加された 著者 flash,
つまり、HTMLから直接jQueryライブラリへのリンクを追加すると、jQueryが利用可能になるため、TypeScriptだけではそれがわかりません。
追加された 著者 Oscar Paz,
いいえ、プロジェクトルートにあります。 ng serve を実行したのと同じ時点から。しかし、何らかの方法でプロジェクトにjQueryが含まれていることを確認すると、ランタイムエラーが発生します。
追加された 著者 Oscar Paz,
tsconfig.json には、 typeRoots:["node_modules/@ types"] のようなものが必要です。あなたはそれを手に入れましたか?
追加された 著者 Oscar Paz,

I assume that $ is jQuery. You must add jQuery to your dependencies and imported it in the file where you're using it. I'd suggest also adding the type definitions for jQuery: npm install @types/jquery --save-dev

他の方法でjQueryをインポートしている場合は、型を追加するだけです。

1
追加された
追加された 著者 flash,
何らかの理由があります、なぜ私はまだ同じエラーを受けているのですか?
追加された 著者 flash,
今チェックしました、はい、持っています
追加された 著者 flash,
この npm install @ types/jquery --save-dev を実行した後、このメッセージが 53個のパッケージに69個のパッケージが追加されていますが表示されます
追加された 著者 flash,
node_modulesパスに npm install @ types/jquery --save-dev を実行する必要がありますか?
追加された 著者 flash,
私はこの行で確信がありません。あなたはそれについてもっと詳しく述べることができますか?
追加された 著者 flash,
npm install @ types/jquery --save-dev を実行する必要がある場所を確認するだけですか。 node_modulesがインストールされているパスにありますか?
追加された 著者 flash,
つまり、HTMLから直接jQueryライブラリへのリンクを追加すると、jQueryが利用可能になるため、TypeScriptだけではそれがわかりません。
追加された 著者 Oscar Paz,
いいえ、プロジェクトルートにあります。 ng serve を実行したのと同じ時点から。しかし、何らかの方法でプロジェクトにjQueryが含まれていることを確認すると、ランタイムエラーが発生します。
追加された 著者 Oscar Paz,
tsconfig.json には、 typeRoots:["node_modules/@ types"] のようなものが必要です。あなたはそれを手に入れましたか?
追加された 著者 Oscar Paz,

tsファイルでjqueryを使用している場合は、$をany型の変数として宣言すると、エラーにはなりません。

var $:anyを宣言する

0
追加された

tsファイルでjqueryを使用している場合は、$をany型の変数として宣言すると、エラーにはなりません。

var $:anyを宣言する

0
追加された

style.widthを使う

<div id="mySidenav"  [style.width]="myWidthVariable+'%'" class="sidenav">

And then set the value of "myWidthVariable" on your openNav() and closeNav() methods (just the number).

0
追加された

style.widthを使う

<div id="mySidenav"  [style.width]="myWidthVariable+'%'" class="sidenav">

And then set the value of "myWidthVariable" on your openNav() and closeNav() methods (just the number).

0
追加された

これは可能な解決策です:

HTML:

<div>

</div>
And the following HTML code will close the navbar:

<div id="mySidenav" class="sidenav" style="{{vstyle}}">
  
</div>

Typescript:

//Define a visual style variable
vstyle: = 'width:50%;';


openNav() 
 {
     vstyle = 'width:50%;';  //Line A
 }

 closeNav() 
 {
    vstyle = 'width:0%;';  //Line A
 }
0
追加された
Angular - 日本のコミュニティ [ja]
Angular - 日本のコミュニティ [ja]
3 参加者の

このグループではAngularについて話します。 パートナー:kotaeta.com