Question

我正在尝试为手风琴提供文件附件选项。我们可以考虑选择一种可以折叠和展开的按钮。

Click here for Accordion reference that I am using

我正在根据来自Web服务的JSON数据设计手风琴。假设我在JSON数据中总共有3个标头，然后使用ngFor它将制作3个手风琴。

我面临的问题是，每当我在手风琴上附加任何文档时，它的文件名都会显示在第一个手风琴上，但是应该显示在我要添加文件或文档的手风琴上。

我写了一个代码在打字稿中显示文件名。

Sample.component.html文件如下：

<div ng-controller="AccordionDemoCtrl" class="accordions-container row">
         <div class="accordion-container col-md-12 col-lg-12 col-xxxl-12">
            <nb-accordion multi >
               <nb-accordion-item *ngFor="let Data of SampleData;index as i" [attr.data-index]="i" #items1 >
               <nb-accordion-item-header id="{{Data.key}}" class="row" style="margin-right: 0px;">
                  <div class="col-lg-10"><b>{{Data.HeaderName}}</b></div>
               </nb-accordion-item-header>
               <nb-accordion-item-body>
                  <div>
                     <ul>

                     <!-- here I am uploading the files-->
                        <div class="uploadfiles">
                           <div class="col-lg-2">
                              <div class="image-upload" id="{{Data.key}}">
                                 <label for="file-input">
                                 </label>
                                 <input id="file-input" type="file" multiple="multiple" (change)="uploadFiles($event,Data.Post,'filename',Data.key);salert(Data.key)"/>
                              </div>
                           </div>
                        </div>
                     </div>
                     </ul>

                  </div>
                  <!-- Here I am printing the files -->
                  <div *ngFor="let file of Data.Post.files">
                     <div class="row">
                        <div class="col-lg-10">
                           <div class="image-dlt">
                              <li id="{{file.name}}">{{file.name}}</li>
                           </div>
                        </div>
                     </div>
                  </div>
               </nb-accordion-item-body>
               </nb-accordion-item>
            </nb-accordion>
            </div>
            </div>

sample.componet.ts文件

 files: Object = [];
    uploadFiles(e: Event, Post, file, key) {
        var target: HTMLInputElement = e.target as HTMLInputElement;
        Post.files = target.files;

    }

如果我展开第二个手风琴并附加任何文件。然后它将在第一手风琴中显示。但是我想在特定按钮上紧随附件按钮之后显示附件文件。

我已经在此方面进行了大量的研发，但直到现在仍无法解决我的问题。

有人可以帮我吗？

谢谢。

手风琴中的文件附件选项

0 个答案: