文件上传器特定于* ngFor Angular中的对象

时间:2017-06-26 06:43:34

标签: angular file-upload ng2-file-upload

我有一个讨论论坛webapp。用户提出问题的地方。 我正在使用ng2-file-upload。当我的讨论论坛列出使用* ngFor循环时,每个讨论都有一个“评论”输入框,他们可以在其中上传图像广告。当从相应的设备中选择图像时,我正在显示一些预览图像。

当我选择图像时,它的预览显示在每个对象上。我基本上想要实现的图像上传和预览应该是对象的各自。以下是我尝试的代码:

dashboard.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>

dashboard.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() {}
}

enter image description here

我想在我选择的输入标签下面显示图像。

0 个答案:

没有答案