опция прикрепления файла в аккордеонах

Question

Я пытаюсь дать возможность вложения файлов в аккордеонах.аккордеоны, мы можем рассмотреть тип кнопки, которую мы можем свернуть и развернуть.

Нажмите здесь для ссылки на Аккордеон, который я использую

Я проектирую аккордеоны в соответствии с JSONданные, поступающие с веб-сервисов.Предположим, что у меня всего 3 заголовка в данных JSON, тогда при использовании 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;

    }

Если я раскрою второй аккордеон и приложу любой файл.тогда это будет показано в первом аккордеоне.но я хотел показать вложенный файл сразу после прикрепленной кнопки, в частности, на гармошке.

Я уже много занимался этим, но до сих пор не смог решить мою проблему.

Может кто-нибудь, пожалуйста, помогите мне с этим.

Заранее спасибо.