我有一个讨论论坛 webapp。用户发布问题的地方。我正在使用ng2-file-upload。正如我的论坛使用 *ngFor 循环列出的那样,每个讨论都有一个“评论”输入框,他们可以在其中很好地上传图片广告。由于图像是从相应的设备中选择的,我正在显示一个小预览图像。
当我选择图像时,它的预览会显示给每个对象。我基本上想要实现的图像上传和预览应该是各自的对象。下面是我试过的代码:
仪表板.html
<div class="replyInput">
<textarea placeholder="Write a reply"></textarea>
<div class="postimg" *ngFor="let item of commentImgUploader.queue">
<img src="" imgPreview [image]="item?._file">
<a (click)="removeFileFromQueue(item)" class="btnRemove">Remove</a>
</div>
<div class="uploadFile">
<label for="uploadImgForComment">File</label>
<input id="uploadImgForComment" name="uploadImg" type="file" ng2FileSelect [uploader]="commentImgUploader"
(change)="uploadFileChange()">
</div>
<input class="btn" value="submit" name="submit" type="submit">
</div>
仪表板.component.ts
export class DashboardComponent implements OnInit {
/**Variables for Posting a new Discussion**/
uploader: FileUploader = new FileUploader({}); //This is for question
commentImgUploader: FileUploader = new FileUploader({});
constructor(){}
uploadFileChange() {}
}
我想在我选择的输入标签下方显示图像。