![](/img/trans.png)
[英]Angular2 ngModel binding in the third property level gets undefined
[英]Angular2 ngModel checkbox undefined
只是一个简单的问题,如果有人知道如何解决此问题,但是复选框输入存在一些问题。
通过以下方式配置
<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项目正在以网络工作者的身份运行。
有没有人有任何类似的问题,并且知道如何解决?
这段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);
}
}
我做了一个快速的解决方法,因为似乎复选框的值未在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)并添加了自己的click事件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.