I use ngb-accordion in my app. I am trying to get data from every panel but when the first panel is opened click from the second panel returns me wrong data.

Result

I think the problem is the event which raises when input file changes.

Stackblitz Link

I will be glad if someone give me a hint for solving this problem.

CodePudding user response：

There are few things to note in your code.

1. Your *ngFor is at ngb-accordion which is creating a new accordion for every loop, instead of creating multiple panel within one accordion.

Fix: <ngb-panel *ngFor="let data of datalist; let i = index">

2. You are using the same label for all three panels, because of which your first panel is opening every time, regardless of which panel you are clicking.

Fix: <label [for]="'image-input-' i"> and <input ... [id]="'image-input-' i"

3. The modal that opens after image selection has no knowledge of which panel it's getting triggered from. So, you have to use your (change)="onFileChange($event, data)" event/function to keep track of selected panel/corresponding data.

Then you can pass that selection from your modal to your processFile(...)

Fix:

export class AppComponent {
  ...
  selectedData: Data;

  ...
  ...

  onFileChange(event: any, data): void {
    ...
    this.selectedData = data;
  }
}

html:
...
<input ... (change)="onFileChange($event, data)>

...
...

<button
 ...
 (click)="processFile(imageInput, selectedData)"
> Done
</button>

Stackblitz Demo