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中单击

1 个答案: