javascript - Angular 6 - 单击事件绑定不适用于复选框

Question

我正在使用反应形式向用户显示英雄列表，并希望在用户通过单击复选框选择英雄时触发控制台日志。

所以，问题是当我在控制台中打印 this.form 时，我得到了正确的值，但是当我打印 this.form.value 时，我得到了先前状态的值。

选择 1 个英雄时的屏幕截图

As you can see, when 1 hero is selected, this.form is printing the correct values but this.form.value is printing the previous state, ie when no values were selected.

选择2英雄时的截图

2个英雄也一样。显示以前状态的结果，即选择1英雄时。

相同的代码如下。

 <div class="lists">
  <form [formGroup]="form" (submit)="select()">
      <ul formArrayName="assets" class="heroes p-2">
      <li class="p-2" *ngFor="let asset of form.controls.assets.controls; let i = index"
          [class.selected]="hero === selectedHero"
          (click)="select()">
          <input type="checkbox" [formControlName]="i">
          {{heroes[i].name}}
      </li>
      </ul>
      <button>submit</button>
  </form>
</div>

组件.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';
import { of } from 'rxjs';

@Component({
  selector: 'app-commands',
  templateUrl: './commands.component.html',
  styleUrls: ['./commands.component.scss']
})
export class CommandsComponent implements OnInit {

  form: FormGroup;
  selectedHero;
  heroes = [
    { id: 11, name: 'Dr Nice', isChecked: false },
    { id: 12, name: 'Narco', isChecked: false },
    { id: 13, name: 'Bombasto', isChecked: false },
    { id: 14, name: 'Celeritas', isChecked: false },
    { id: 15, name: 'Magneta', isChecked: false },
    { id: 16, name: 'RubberMan', isChecked: false },
    { id: 17, name: 'Dynama', isChecked: false },
    { id: 18, name: 'Dr IQ', isChecked: false },
    { id: 19, name: 'Magma', isChecked: false },
    { id: 20, name: 'Tornado', isChecked: false },
  ];

  constructor( private formBuilder: FormBuilder,) {
                this.form = this.formBuilder.group({
                  assets: new FormArray([])
                });
                this.addCheckboxes();
              }

  ngOnInit() {
  }

  private addCheckboxes() {
    this.heroes.forEach((o, i) => {
      const control = new FormControl();
      (this.form.controls.assets as FormArray).push(control);
    });
  }

  select() {
    console.log(this.form);
    console.log(this.form.value);
  }

  onSelect(hero): void {
    this.selectedHero = hero;
  }

}

请帮忙。

标签： javascripthtmlangular

Answer 1

似乎在更新表单对象之前执行了“单击”事件处理程序。如另一个答案所示，“更改”事件处理程序将按预期更新表单。

混乱是由浏览器控制台中表单对象的可视化引起的。当您记录 this.form 时，您会看到其属性及其最新值。当您记录 this.form.value 时，您将获得该属性的当前值，这是它在记录时的实际值。