从角度 6 中的另一个组件传递值后，如何动态检查复选框？答案

【问题标题】：How to make a checkbox checked dynamically after passing a value from another component in angular 6?从角度 6 中的另一个组件传递值后，如何动态检查复选框？
【发布时间】：2019-02-13 16:31:50
【问题描述】：

我的第二个.html：

          <div class="col-lg-4 col-md-4 col-sm-4"> 
            <input type="checkbox" class="checkmark" name="nond" [checked]="r=='true'"  (change)="nond($event, check)">
          </div>

我的第二个.ts：

   Flag(): void {
this._call.getflag()
  .subscribe(r => {
    this.Flag = r;
    let value = true;
    if (r == value) {
      let data = {
        'flag': r
      };
      let obj = this.$modal.show(DComponent, undefined, data)
        .subscribe(r => {
          if (r.click === 'CONTINUE') {
            obj.unsubscribe();
          }
        });
    }

  });
}

我在这个 html 页面中有一个复选框。在我的打字稿文件中，初始化时，我调用了一个 API 函数，它将返回一个布尔值。基于此，我需要检查我的复选框并应该通过选中的值。那么有人可以告诉我如何在 Angular 6 中做到这一点吗？

【问题讨论】：

我在这里没有完全得到你的代码，但现在你正在检查 r == string true 是否不是布尔值。如果你想在r 是布尔值true 时检查它，只需执行：[checked]="r"。但我什至不明白r 来自哪里：D

标签： html angular checkbox angular6

【解决方案1】：

如果你的 "r" 是一个布尔变量，那么你甚至不需要使用 [checked]

下面不需要

[checked]="r=='true'"  (change)="nond($event, check)"

改为这样做

<button (click)="changeCheckBoxStatus(true)">Check</button>
<button (click)="changeCheckBoxStatus(false)">Uncheck</button>

<input type="checkbox" class="checkmark" name="nond" [ngModel]="checkboxStatus" (ngModelChange)="checkBoxStatus($event)"> checkBox

组件

export class CheckBoxComponent {
  checkboxStatus = true;

  checkBoxStatus(event) {
    console.log(event);
    this.checkboxStatus = event;
  }

  changeCheckBoxStatus(status: boolean) {
    this.checkboxStatus = status;
  }
}

注意： 如果您使用（更改）事件，它只会在用户物理单击复选框时触发，当您从组件更新复选框状态时不会触发

【讨论】：

非常感谢。但我现在的问题是 r 没有返回布尔变量。 r 在我的控制台中给出 {click: "CONTINUE"} 这个值。