动态绑定图像，但并非所有图像都可以在 Angular 中单击答案

【问题标题】：Binding images dynamically but not all images are clickable in Angular动态绑定图像，但并非所有图像都可以在 Angular 中单击
【发布时间】：2017-11-09 17:11:18
【问题描述】：

这是我的打字稿代码，我在列表项中动态绑定了多个图像。

 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]);
        }

当我单击特定图像进行预览时，该单击事件不起作用。

【问题讨论】：

你不能只用 jQuery 将带有 Angular 表达式的 HTML 附加到 DOM 中，希望它能起作用。它赢了。 Angular 在启动时（或在构建时，使用 AOP 时）编译模板。停止使用 jQuery。从您的 TypeScript 代码修改模型，并使用 Angular 模板生成 HTML。
首先感谢您的回答。先生，我是 angular 2 的新手。我无法在 typescript.so 中获取 html 标签的动态绑定代码，我只使用了 jquery。您能否提供上述代码的打字稿代码。以及为什么我们不能在 typescript 中使用 jquery？

标签： typescript angular2-routing angular2-template angular2-forms

【解决方案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>

在打字稿中，您实现了如下所述的循环概念！

  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;
                this.rows.push(src);
            }
            reader.readAsDataURL(event.target.files[i]);
        }

【讨论】：