Angular2 ngModel复选框未定义

时间:2016-12-13 14:34:50

标签: javascript angular checkbox ngmodel

如果有人知道如何解决这个问题,那么这只是一个简单的问题,但我在复选框输入方面遇到了一些问题。

按以下方式配置

<input type="checkbox" [(ngModel)]="settings.ht_enabled" (ngModelChange)="changeSetting('ht_enabled')" id="setting-ht_enabled"> <label for="setting-ht_enabled">ht enabled</label>

每次单击该复选框时,我的模型的值都将变为未定义,(ngModelChange)将被触发,只会执行console.log。 设置得到了正确设置,我看到了选中的复选框。只有当我实际点击它时,模型的值才会变得不确定。

另外需要注意的是,这个Angular2项目是作为Web工作者运行的。

有没有人有任何类似的问题,知道如何解决这个问题?

这段HTML背后的组件是

@Component({
  selector: 'app-setting-form',
  templateUrl: './setting-form.component.html',
  styleUrls: ['./setting-form.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SettingFormComponent {
  settings: Setting;

  constructor(
    private service: SettingService,
    private cdr: ChangeDetectorRef,
    private messageBrokerService: MessageBrokerService,
  ) {
    this.messageBrokerService.send('access_token', '', this.initialize.bind(this));
  }

  initialize(token) {
    this.service.getSettings(token).subscribe(settings => this.handleSettings(settings));
  }

  handleSettings(settings: any) {
    this.settings = new Setting(settings);
    this.cdr.markForCheck();
  }

  changeSetting(setting: string) {
    console.log(this.settings);
  }
}

1 个答案:

答案 0 :(得分:0)

我已经快速解决了,因为复选框的值似乎没有在Angular2中正确设置ngModel。我不知道这是否与在web worker中运行的项目有关,但我得到了如下工作。

<input type="checkbox" [(ngModel)]="settings.ht_enabled" (click)="changeSetting('ht_enabled')" id="setting-ht_enabled"> <label for="setting-ht_enabled">ht enabled</label>

并且changeSettings函数是

changeSetting(setting: string) {
  this.settings[setting] = !this.settings[setting];
  console.log(this.settings);
}

我删除了(ngModelChange)并添加了我自己的点击事件