Javascript 需要帮助在上传图像后在所选图像之间切换吗

预期行为：

单击“表格行”应仅在右侧的div中显示所选图像

当前状态：

单击每个表行将显示所选图像，而不切换所选图像。另一个错误是再次单击上一个表行会创建图像的另一个副本

Plunker

媒体图像.component.html

<div id="media-content-container">
    <div id="media-content-wrapper">
        <div id="upload-selected-images">
            <input
                type="file"
                id="files"
                name="files[]"
                (change)="handleFileSelect($event)"
                multiple />
        </div>
        <table class="table" id="list">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Size</th>
                </tr>
            </thead>
            <tbody>
                <tr 
                    *ngFor="let image of images, let i = index "
                    (click)="displayImage(files[i])">
                    <td>{{image.fileName}}</td>
                    <td>{{image.fileType}}</td>
                    <td>{{image.fileSize}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="selected-image">
    </div>
</div>

---

你有两种方法可以做到这一点

1） 使用当前代码，可以通过删除div的子项来清除div的内部，或者

2） 用有棱角的方式做。您将使src成为一个变量，这将反过来让angular进行更新

---

此链接将帮助您从2开始。

代码中有几个问题。我在新的plnkr中修复了它们。 Plnkr：

第二个错误是由以下代码引起的：

this.files = evt.target.files; 

每次上载新图像时，都会重置文件数组。我将其移动到for循环中以修复此问题

---

其他代码更改包括：

组件中的新字段：

  seletedImageUrl: string;
  selectedImageName: string;

图像上载代码：

displayImage( i){
  let reader = new FileReader();
  const selectedFile = this.files[i];

  reader.onload = e => {
      this.selectedImageUrl =e.target.result;
      this.selectedImageName = encodeURI(selectedFile.name);      
  };

  reader.readAsDataURL(selectedFile);
}

HTML

感谢您帮助我调试此问题。在不分享答案的情况下，您能告诉我如何在图像加载时获取图像的宽度和高度吗？您可以使用

.width

和

.height

。检查此img.onload对我来说很有意义，但我需要确保我将宽度和高度添加到我的图像数组（图像：any=[]；）中，以在表中显示该值。我认为您应该

new Image（）

并获得此处提到的尺寸。如果您遇到问题，我将稍后帮助您让我知道。谢谢您的链接。我能够检索维度并在表中显示数据，这是因为我在用户单击

  seletedImageUrl: string;
  selectedImageName: string;

displayImage( i){
  let reader = new FileReader();
  const selectedFile = this.files[i];

  reader.onload = e => {
      this.selectedImageUrl =e.target.result;
      this.selectedImageName = encodeURI(selectedFile.name);      
  };

  reader.readAsDataURL(selectedFile);
}

  <img *ngIf="selectedImageUrl && selectedImageName" 
     style="height:80px;" 
     [src]="selectedImageUrl" 
     [title]="selectedImageName"/>