Question

我正在尝试在手风琴中添加多个文件。

我正在使用Nebular手风琴，它包含标题部分和主体部分。

在标头部分中，我正在写标头名称，在正文部分中，我正在附加一些文件。

中提供了手风琴的工作示例。

我正在从JSON数据读取headerName。格式如下。

[{

    "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数据。

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 文件

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

    }

我面临的问题是，无论何时我上传任何文件，它都会在第一手风琴上显示。

假设我展开第二个手风琴，然后附加或上传任何文件，那么它应该显示在第二个手风琴主体中，但始终显示在第一个手风琴主体中。

也许我犯了一个愚蠢的错误，但我无法识别该错误。

有人可以帮我吗？问题中已经附带了手风琴的示例链接。

谢谢。

使用Angular 7在Accordions中上传文件

0 个答案: