动态绑定图像但并非所有图像都可点击 Angular

Question

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

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

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

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

动态绑定图像但并非所有图像都可点击 Angular

Binding images dynamically but not all images are clickable in Angular

typescript

angular2-forms

angular2-template

angular2-routing