Я пытаюсь добавить несколько файлов в аккордеонах.
Я использую Небулярные аккордеоны, которые содержат часть заголовка и часть тела.
В части заголовка я пишу имя заголовка, а в части тела я прикрепляю некоторые файлы.
Рабочий пример Nebular Accordions доступен по этой ссылке нажмите здесь
Я читаю headerName из данных JSON. который имеет следующий формат.
[{
"HeaderName": "Header 1",
"Post":
[
{
"attachments":
[
{
"attachment":"attachment file"
}
]
},
{
"attachments":
[
{
"attachment":"attachment file"
}
]
},
{ "attachments":
[
{
"attachment":"attachment file"
}
]
},
{
"attachments":
[
{
"attachment":"attachment file"
}
]
},
{
"attachments":
[
{
"attachment":"attachment file"
}
]
}
]
},
{
"HeaderName": "Header 2",
"Post":
[
{
"attachments":
[
{
"attachment":"attachment file"
}
]
},
{
"attachments":
[
{
"attachment":"attachment file"
}
]
},
{ "attachments":
[
{
"attachment":"attachment file"
}
]
},
{
"attachments":
[
{
"attachment":"attachment file"
}
]
},
{
"attachments":
[
{
"attachment":"attachment file"
}
]
}
]
}
]
с использованием ng для печати данных JSON в Accordions.
Sample.componet.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>
из вышеуказанного файла component.html, я вызываю метод для отображения файлов в теле аккордеона.
sample.componet.ts file
files: Object = [];
uploadFiles(e: Event, Post, file, key) {
var target: HTMLInputElement = e.target as HTMLInputElement;
Post.files = target.files;
}
Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я загружаю какие-либо файлы, это будет отображаться на первом Аккордеоне.
Предположим, если я раскрою второй аккордеон, а затем, если я собираюсь прикрепить или загрузить какие-либо файлы, он должен отображаться во втором корпусе аккордеона, но всегда отображается в первом корпусе аккордеона.
возможно, я делаю глупую ошибку, но не могу ее идентифицировать.
Может ли кто-нибудь помочь мне с этим? Пример ссылки на Аккордеоны уже прикреплен с вопросом.
Заранее спасибо.