イメージをダイナミックにバインドしますが、すべてのイメージをクリックすることはできません。

これはリストアイテムで複数のイメージを動的にバインドした私のタイプコードです。イメージをダイナミックにバインドしますが、すべてのイメージをクリックすることはできません。

for (let i = 0; i < event.target.files.length; ++i) { 
      var reader = new FileReader(); 
      console.log(this.imgs); 
      reader.onload = (e: any) => { 
       var src = e.target.result; 
       $("#UiImage").append("<li style=\"float:left;margin: 10px 5px\" id=\"liimage" + i + "\" ><img src=\"" + src + "\" id=\"Upimage" + i + "\" (click)=\"ZoomImage()\" \height=\"100px\" \width=\"100px\" /></li> &nbsp;"); 
       this.imgs.push(src); 
       this.src_pt = src; 
      } 
      reader.readAsDataURL(event.target.files[i]); 
     }

プレビューのために特定の画像をクリックすると、そのクリックイベントは機能しません。

出典

2017-06-08 raghurox27

jQueryを使用してHTMLにアンギュラエクスプレッションを追加するだけで、うまくいきません。それは勝った。 ANgularは、起動時（またはAOPを使用しているビルド時）にテンプレートをコンパイルします。 jQueryの使用をやめてください。 TypeScriptコードからモデルを修正し、角度テンプレートでHTMLを生成します。 –

最初に答えに感謝します。そしてサー、私は角度2に新しいです。私はtypescript.soだけでhtmlタグの動的バインディングのコードを取得できませんでした、私はjqueryを使用しました。あなたは、上記のコードのタイプコードコードを提供してください。なぜ私たちはtypescriptでjqueryを使用できないのですか？ – raghurox27

ちょうどこの1つを試してみて、それが動作しているかどうかを教えてください。：後述するように、あなたはこのように行うHTMLでは

...

<ul style="list-style-type: none; display: inline;" *ngFor="let row of rows"> 
           <li style="float:left;margin: 10px 5px"> 
            <img src="{{row}}" width="100px" height="100px" (click)="ZoomImage($event,row)" /> &nbsp; 
           </li> 
          </ul>

そしてtypescriptですで、あなたはループの概念を実装します！

出典

2017-06-08 10:38:02 Vino

イメージをダイナミックにバインドしますが、すべてのイメージをクリックすることはできません。

答えて

関連する問題