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 生成单选按钮对的正确方法是什么？

更新：

我的整个模板：

<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