预期行为:
单击表格行应仅在右侧的div中显示所选图像。
当前状态:
单击每个表格行将显示所选图像,而不会切换所选图像。另一个错误是再次单击上一个表行会创建另一个图像副本。
Plunker
http://plnkr.co/edit/26VanqdKqltbD6Bdclg9?p=preview
media-image.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>
媒体-image.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-media-image',
templateUrl: './media-image.component.html',
styleUrls: ['./media-image.component.css']
})
export class MediaImageComponent implements OnInit {
images:any = [];
files:FileList;
ngOnInit(){
}
handleFileSelect(evt) {
this.files = evt.target.files; // FileList object
console.log("this.files:: ", this.files);
for (let i = 0, f; f = this.files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
this.images.push({
fileName: encodeURI(f.name),
fileType: f.type || 'N/A',
fileSize: `${f.size} bytes`
});
console.log("images:: ", this.images);
}
}
displayImage( f ){
let reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e){
// Render thumbnail.
let div = document.createElement('div');
// div.className = 'ad-images';
// div.style.cssText = 'display:none';
div.innerHTML = ['<img style="height:80px;" src="', e.target.result,
'" title="', encodeURI(theFile.name), '"/>'].join('');
document.getElementById('selected-image').insertBefore(div, null);
}
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
媒体-image.component.css
#media-content-container{
display: flex;
justify-content: space-between;
align-items: center;
margin: 2em 0;
}
答案 0 :(得分:1)
你有2种方法可以做到这一点。
1)使用您当前的代码,您可以通过删除div的子项来清除div的内部,或者
2)以角度方式做。你可以使src成为一个变量,这将让angular进行更新。
此链接可帮助您开始使用2 Angular 2 change image src attribute。
答案 1 :(得分:1)
您的代码中存在多个问题。我把它们固定在新的plnkr中。 Plnkr:http://plnkr.co/edit/AzVB1NVvlGwbJ15f5TjZ?p=preview
第二个错误是由于这段代码:
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
<img *ngIf="selectedImageUrl && selectedImageName"
style="height:80px;"
[src]="selectedImageUrl"
[title]="selectedImageName"/>