无法单击星云主题角的 nb-checkbox答案

【问题标题】：Not able to click nb-checkbox of Nebular theme angular无法单击星云主题角的 nb-checkbox
【发布时间】：2020-06-10 11:00:31
【问题描述】：

我是 Nebular 主题的新手。我有一个复选框，但它不起作用。

HTML

<nb-checkbox [value]="checked" (change)="toggle($event)"></nb-checkbox>

打字稿

  toggle(checked: any) {    
    this.checked = checked.target.checked;
  }

模块.ts

//import
import { NbCheckboxModule } from '@nebular/theme';

imports: [NbCheckboxModule]

toggle 函数被正常调用，但复选框未被选中。

我已经调试了很长时间，但无法确定问题所在。关于可能出什么问题的任何建议？谢谢。

Angular 版本：7.1

星云版：^3.5.0

【问题讨论】：

您是否通过设置 this.checked = true 来测试只是为了调试建议？
@AbelValdez 是的，我做到了。我什至直接将 true 设置为 [value] 属性，但它仍然没有显示它已选中。

标签： angular typescript checkbox angular7 nebular

【解决方案1】：

我认为您应该像在 these 示例中那样使用它
它适用于 value 和 checked 输入

<nb-checkbox [checked]="checked" (checkedChange)="toggle($event)">Toggle me</nb-checkbox>

我通过工作示例为您创建了 stackblitz https://stackblitz.com/edit/angular-nb-checkbox?file=src/app/app.component.ts

【讨论】：

感谢您的回答。实际上我使用的是旧版本的星云（我应该在问题中提到）。 checkedChange 不能与旧版本一起使用。

【解决方案2】：

在您的 HTML 中添加以下内容：

<nb-checkbox status="primary" [value]="checked" (change)="setCheckedStatus($event)">Primary</nb-checkbox>

在您的 component.ts 文件中添加以下内容：

checked: true; // declare this variable in your component
setCheckedStatus(checked) {
    console.log('checked', checked.target.checked);
    this.checked = checked.target.checked; // your variable
}

【讨论】：