带有* ngFor的angular2-mdl扩展面板行为不正确

Question

在我的组件中，我得到了一个我在模板中显示的任务列表，如下所示：

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

我的想法是，我将任务视为面板，我可以扩展单个面板以编辑该特定任务。

我面临两个问题：

1. 使用* ngFor迭代从后端扩展面板获取的任务数组会失去它的自然行为，我可以打开所有面板（理想情况下只打开一个面板）

2. 由于我正在使用ngModel来绑定从后端收到的针对单个任务的值，因此出现ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.错误。这基本上导致在所有面板表单中显示最后的任务属性。

我在这里做错了什么？这不是使用扩展面板的正确方法吗？