У меня есть угловая 8-я программа, в которой я хочу отредактировать элемент после нажатия кнопки «Изменить», и значение отображается в соответствующих формах. Таким образом, для имени значение будет отображаться в имени ввода текста. Возраст будет отображаться при вводе текста возраста и т. Д. Проблема заключается в том, что при нажатии кнопки «Изменить» файл ввода изображения не отображает или не удерживает изображение. Теперь, как мне отобразить это изображение по умолчанию при нажатии кнопки редактирования, похожей на текстовые файлы? Я знаю, что для ввода текста используется [(ngModel)] = "value"/>
, но это не похоже на работу с входными файлами. Ниже мой код для входного файла изображения и соответствующего файла TS.
HTML
<div class="form-group">
<input formControlName="ProductFile" #file type="file" name="photo" ng2FileSelect [uploader]="uploader" (change)="previewImage(file.files)" />
<div [hidden]="!imgURL">
<img [src]="imgURL || '//:0'" height="200" >
</div>
</div>
edit file.ts
previewImage(files, product) {
if (files.length === 0)
return;
var mimeType = files[0].type;
if (mimeType.match(/image\/*/) == null) {
return alert('Only image files!');
}
var reader = new FileReader();
this.imagePath = files;
reader.readAsDataURL(files[0]);
reader.onload = (_event) => {
//upload percentage
this.uploadPercent = new Observable((observer) => {
Math.round((_event.loaded / _event.total) * 100);
});
this.imgURL = reader.result;
}
}