Question

我试图在Angular 7中将文件（doc）附加到手风琴上，但是每次都将其附加到索引0上。

说明：我正在使用手风琴，在其中读取JSON文件，并据此打印标题和正文部分。

因此，在每个身体部位，我都需要附加文件。但是问题是，每当我附加任何文件时，它都只会在第一手风琴上添加。

Sample.component.html

  <nb-accordion multi >
   <nb-accordion-item *ngFor="let Data of sampleData;index as i" [attr.data-index]="i" #items1 >
   <nb-accordion-item-header>
      {{Data.topicName}}
   </nb-accordion-item-header>
   <nb-accordion-item-body>
      <div class="uploadfiles">
         <div class="col-lg-2">
            <div class="image-upload">
               <label for="file-input">
               <img src="assets/images/push-pin.png"/>
               </label>
               <input id="file-input" type="file" multiple="multiple" 
                  (change)=uploadFiles($event,Data,i)/>
               {{i}}
            </div>
         </div>
         <div *ngFor="let file of Data.files">
            <div class="row">
               <div class="col-lg-10">
                  <div class="image-dlt">
                     <li id="{{file.name}}">{{file.name}}{{i}} <img src="assets/images/deleteIcon.png" title="Remove Attachment" (click)=deleteFiles(file.name)/></li>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </nb-accordion-item-body>
   </nb-accordion-item>
</nb-accordion>

Sample.component.ts

files: Object = [];
    uploadFiles(e: Event, data, i) {
        console.log("index"+i);
        var target: HTMLInputElement = e.target as HTMLInputElement;
        console.log(target.files);
        //console.log(data.topicName);
        data.files = target.files;
        console.log(data);
        this.files="";
    }

上面附加了我所有用Angular 7编码的文件。当我尝试附加任何文档时，它将仅在第一次迭代时附加。

在所附的图像中，共有3个标题，如果我们扩展标题或手风琴，则可以在每个手风琴中添加多个文档。但是，如果我尝试在index = 2手风琴中添加文档，它将在index = 0手风琴中添加。

我不知道为什么会这样。

我想在第二个索引手风琴中添加任何附件，那么它应该与第二个手风琴一起使用。

注意：索引已经用0、1和2写入了手风琴标题部分。

有人可以帮助我吗？预先感谢。

上传文件时无法附加附件

0 个答案: