angular - angular2-mdl expansion panel with *ngFor behaves incorrectly -
in component list of tasks showing in template 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"> <!-- task --> <p> <mdl-textfield label="what task" type="text" formcontrolname="what_task" floating-label [ngmodel]="task.what_task"></mdl-textfield> </p> <!-- how --> <p> how 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 see tasks panels , can expand individual panel edit specific task.
there 2 problems facing here:
with *ngfor iterate on task array fetched backend expansion panel loses it's natural behavior , able open panels (ideally 1 panel opened)
as using ngmodel bind values received backend individual task getting
expressionchangedafterithasbeencheckederror: expression has changed after checked.
error. results in displaying last tasks properties in panel forms.
what doing wrong here? not correct way use expansion panels?
Comments
Post a Comment