In my component I get a list of tasks which I am showing in my template as following:
<mdl-expansion-panel-group>
<mdl-expansion-panel *ngFor="let task of tasks">
<mdl-expansion-panel-header>
<mdl-expansion-panel-header-list-content><h6>{{task.what_task}}</h6></mdl-expansion-panel-header-list-content>
</mdl-expansion-panel-header>
<mdl-expansion-panel-content>
<mdl-expansion-panel-body>
<form [formGroup]="form">
<!-- What task -->
<p>
<mdl-textfield label="What task" type="text" formControlName="what_task" floating-label [ngModel]="task.what_task"></mdl-textfield>
</p>
<!-- How often -->
<p>
How often do you perform?<br/>
<mdl-radio value="Daily" formControlName="how_often" mdl-ripple [ngModel]="task.how_often">Daily once</mdl-radio>
<mdl-radio value="Weekly" formControlName="how_often" mdl-ripple [ngModel]="task.how_often">Weekly once</mdl-radio>
</p><br>
<p>
<button mdl-button (click)="updateTask(task, task.id)" [disabled]="!form.valid" mdl-button-type="raised" mdl-ripple mdl-colored="primary">Submit</button>
</p>
</form>
</mdl-expansion-panel-body>
</mdl-expansion-panel-content>
</mdl-expansion-panel>
</mdl-expansion-panel-group>
My idea here is that I see tasks as panels and I can expand individual panel to edit that specific task.
There are two problems I am facing here:
With *ngFor to iterate over task array fetched from backend expansion panel loses it's natural behavior and I am able to open all the panels (ideally only one panel is opened)
As I am using ngModel to bind values as received from backend for individual task I am getting
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.error. Which basically results in displaying last tasks properties in all the panel Forms.
What am I doing wrong here? Is it not the correct way to use expansion panels?
