У меня есть список задач, использующий материал angular, и у меня проблема с панелью объяснения с помощью перетаскивания. Когда я перетаскиваю поле «Готово к работе», данные внутри панели объяснения изменяются в соответствии с другими данными Div.
См. Изображение ниже для лучшего понимания
Вот код
<div class="example-container">
<h2>To do</h2>
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList]"
class="example-list" (cdkDropListDropped)="drop($event)">
<mat-accordion *ngFor="let item of todo" cdkDrag>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{item}}
</mat-panel-title>
<mat-panel-description>
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field>
<mat-label>First name</mat-label>
<input matInput>
</mat-form-field>
<mat-form-field>
<mat-label>Age</mat-label>
<input matInput type="number" min="1">
</mat-form-field>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
<div class="example-container">
<h2>Done</h2>
<div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]"
class="example-list" (cdkDropListDropped)="drop($event)">
<mat-accordion *ngFor="let item of done" cdkDrag>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{item}}
</mat-panel-title>
<mat-panel-description>
</mat-panel-description>
</mat-expansion-panel-header>
<mat-form-field>
<mat-label>First name</mat-label>
<input matInput>
</mat-form-field>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
Пожалуйста, помогите мне решить эту проблему. Любое решение приветствуется ...