Angular2 ngModel 复选框未定义答案

【问题标题】：Angular2 ngModel checkbox undefinedAngular2 ngModel 复选框未定义
【发布时间】：2017-04-28 15:58:19
【问题描述】：

如果有人知道如何解决这个问题，只是一个简单的问题，但我对复选框输入有一些问题。

如下配置

<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 worker 运行的。

有没有人遇到过类似的问题并知道如何解决？

这段 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);
  }
}

【问题讨论】：

你能发布一些你的javascript吗？
你的 javascript 中有对象“设置”吗？
你试过初始化settings吗？似乎它已经没有任何价值了。
Settings 在handleSettings 函数中设置并被调用。

标签： javascript angular checkbox ngmodel

【解决方案1】：

我做了一个快速的解决方法，因为复选框的值似乎没有在 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) 并添加了我自己的点击事件

【讨论】：