angular2創建和填充單選按鈕組與ngFor

Question

我基本上遍歷JSON對象陣列，並試圖建立預選與值單選按鈕：

<div *ngFor="let task of tasks"> 
    <p> 
     <mdl-textfield label="What task" type="text" formControlName="what_task" floating-label [ngModel]="task.what_task"></mdl-textfield> 
    </p> 

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

</div> 

考慮我有兩個任務，一個具有值how_often設置爲「每日」，第二個設置爲「每週」。創建了兩組單選按鈕，但都獲得了「每週」值，即第二項任務。

我在這種情況下做錯了什麼？使用ngFor生成單選按鈕對的正確方法是什麼？

UPDATE：

我的整個模板：

<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 >Daily once</mdl-radio> 
         <mdl-radio value="Weekly" formControlName="how_often" mdl-ripple >Weekly once</mdl-radio> 
        </p><br> 

        <!-- How important --> 
        <p> 
         How important it is?<br/> 
         <mdl-radio value="Extremely" formControlName="how_important" mdl-ripple [ngModel]="task.how_important">Extremely important</mdl-radio> 
         <mdl-radio value="Rather" formControlName="how_important" mdl-ripple [ngModel]="task.how_important">Rather important</mdl-radio> 
        </p><br> 

        <!-- Why --> 
        <p> 
         <mdl-textfield rows="3" label="Why do you need to perform" type="text" [ngModel]="task.why_perform" formControlName="why_perform" floating-label></mdl-textfield> 
        </p> 

        <!-- Why important --> 
        <p> 
         <mdl-textfield rows="3" label="Why is it important" type="text" [ngModel]="task.why_important" formControlName="why_important" floating-label></mdl-textfield> 
        </p> 

        <!-- Possible improvement --> 
        <p> 
         <mdl-textfield rows="3" label="What improvement you can think of" type="text" 
         [ngModel]="task.possible_improvement" formControlName="possible_improvement" floating-label></mdl-textfield> 
        </p> 


        <!-- Existing solutions --> 
        <p> 
         <mdl-textfield rows="3" label="What are the tools/solutions that you use" type="text" [ngModel]="task.existing_solutions" formControlName="existing_solutions" floating-label></mdl-textfield> 
        </p> 

        <!-- How important improvement --> 
        <p> 
         How important is the improvement?<br/> 
         <mdl-radio value="Extremely" formControlName="how_important_improvement" mdl-ripple [ngModel]="task.how_important_improvement">Extremely important</mdl-radio> 
         <mdl-radio value="Rather" formControlName="how_important_improvement" mdl-ripple [ngModel]="task.how_important_improvement">Rather important</mdl-radio> 
        </p><br> 

        <!-- Advantages of improvement --> 
        <p> 
         How important is the improvement?<br/> 
         <mdl-radio value="Saves money" formControlName="advantages_of_improvement" mdl-ripple [ngModel]="task.advantages_of_improvement">Saves money</mdl-radio> 
         <mdl-radio value="Saves time" formControlName="advantages_of_improvement" mdl-ripple [ngModel]="task.advantages_of_improvement">Saves time</mdl-radio> 
         <mdl-radio value="Saves efforts" formControlName="advantages_of_improvement" mdl-ripple [ngModel]="task.advantages_of_improvement">Saves rfforts</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> 

       <div style="color: red;" *ngIf="errorMessage"> 
        <h4>{{errorMessage}}</h4> 
       </div> 

       <div style="color: green;" *ngIf="successMessage"> 
        <h4>{{successMessage}}</h4> 
       </div> 

      </mdl-expansion-panel-body> 
     </mdl-expansion-panel-content> 
    </mdl-expansion-panel> 
</mdl-expansion-panel-group> 

和組件我有：

this.form = fb.group({ 
     'what_task': this.what_task, 
     'how_often': this.how_often, 
     'how_important': this.how_important, 
     'why_perform': this.why_perform, 
     'why_important': this.why_important, 
     'possible_improvement': this.possible_improvement, 
     'existing_solutions': this.existing_solutions, 
     'how_important_improvement': this.how_important_improvement, 
     'advantages_of_improvement': this.advantages_of_improvement, 

    }); 
    } 

    ngOnInit() { 
    this.getTasks(); 
    } 

    public updateTask(task, taskId) { 
    console.log(task, taskId); 

    this.steps=task.steps; 


    this.task.what_task=this.form.value.what_task 
    this.task.how_often=this.form.value.how_often 
    this.task.how_important=this.form.value.how_important 
    this.task.why_perform=this.form.value.why_perform 
    this.task.why_important=this.form.value.why_important 
    this.task.possible_improvement=this.form.value.possible_improvement 
    this.task.existing_solutions=this.form.value.existing_solutions 
    this.task.how_important_improvement=this.form.value.how_important_improvement 
    this.task.advantages_of_improvement=this.form.value.advantages_of_improvement 

    this.taskService.updateTask(this.task, taskId).subscribe(
     task => { 
     this.task = task, 

     this.errorMessage=null; 
     this.successMessage='Task updated successfully!' 
     }, 
     error => { 
     this.errorMessage = <any>error; 
     this.successMessage=null; 

     }) 


    } 

Answer 1

這樣做的原因是，他們都是（其中全部4）引用相同的formControl，如下所示：formControlName="how_often"。

通過製作匹配每個任務的FormArray，您將獲得所需的結果。

taskform.component.ts

createFormGroup() { 
    return this.fb.group({ 
     'what_task': this.what_task, 
     'how_often': this.how_often, 
     'how_important': this.how_important, 
     'why_perform': this.why_perform, 
     'why_important': this.why_important, 
     'possible_improvement': this.possible_improvement, 
     'existing_solutions': this.existing_solutions, 
     'how_important_improvement': this.how_important_improvement, 
     'advantages_of_improvement': this.advantages_of_improvement, 
    }); 
} 

ngOnInit() { 
    this.getTasks(); 

    this.formArray = new FormArray([]); 
    for(const task of this.tasks) { 
    this.formArray.push(this.createFormGroup()); 
    } 
} 

taskform.component.html

<mdl-expansion-panel *ngFor="let task of tasks; let i = index"> 
    <form [formGroup]="formArray.at(i)"> 

在模板中，我只強調了重大變化。除了這些行外，您的模板應該能夠保持原樣。

我在這裏創建了一個示例plunkr：https://plnkr.co/edit/qIZiBPAjJeYG73c3vmhb?p=preview