在Angular 5的子组件中与@Input绑定时，复选框的选中状态不会更新

Posted 2023-02-23

【中文标题】在Angular 5的子组件中与@Input绑定时，复选框的选中状态不会更新

【英文标题】：Checkbox's checked status doesn't get updated when binding with @Input inside child component in Angular 5

【发布时间】：2018-09-25 15:11:09

【问题描述】：

我正在尝试在子组件中呈现复选框，并根据复选框是否选中显示一些文本。

复选框根据来自父组件的输入属性值（选中）被选中或取消选中。

<input #checkInput type="checkbox" [checked]="checked" />

并使用以下代码显示激活或禁用的文本。

<span>
    <ng-container *ngIf="checkInput.checked">Active</ng-container>
    <ng-container *ngIf="!checkInput.checked">Disabled</ng-container>
</span>

父组件数据来自 API。因此，为了模拟一些延迟，我将 setTimeout 包装在父组件内并渲染表。表格行包含子组件选择器，如下所示。

<tbody>
      <tr *ngFor="let org of organisations">
        <td >org.id</td>
        <td>org.name</td>
        <td><app-child [checked]="org.active" checkedText="Active" uncheckedText="Disabled"></app-child></td>
        <td><a class="button secondary">Edit</a></td>
      </tr>
    </tbody>

我的期望是如果“checked”属性为真，即从父组件到子组件，子组件内复选框旁边的文本应该显示“活动”而不是“禁用”。然而，这并没有发生。最初加载时显示“已禁用”。

我创建了一个 plunker 来演示这种行为。任何人都可以告诉我为什么即使选中了复选框，初始加载的文本也会被禁用？

plunker 的链接：https://plnkr.co/edit/mqmVYdbMF9qGduQYLYXa?p=preview

谢谢。

【参考方案1】：

输入元素上的[checked] 与@Input 不同，Change Detection 的值在更改[checked] 时不会触发。

解决方案 1： 您可以更改为使用[(ngModel)] 而不是[checked] 来解决问题。

<input #checkInput type="checkbox" [(ngModel)]="checked" />
<span>
  <ng-container *ngIf="checkInput.checked">checkedText</ng-container>
  <ng-container *ngIf="!checkInput.checked">uncheckedText</ng-container>
</span>

解决方案 2： 在仍然使用 [checked] 的同时手动触发 change detection AfterViewInit 生命钩子。

import AfterViewInit, ChangeDetectorRef from '@angular/core'

export class ChildComponent implements AfterViewInit 
  constructor(private cd: ChangeDetectorRef)  

  ngAfterViewInit() 
    this.cd.detectChanges();