复选框加载但未点击 HTML Angular答案

【问题标题】：Checkbox loading but not getting clicked HTML Angular复选框加载但未点击 HTML Angular
【发布时间】：2019-11-15 19:04:49
【问题描述】：

有一个奇怪的问题，复选框被加载了 id 和值但没有被点击。也没有显示错误。

<button [popover]="columnConfigJobDetails"><span class="icon-cog"></span></button>  
    <popover-content #columnConfigJobDetails [closeOnClickOutside]="true">
        <ng-container *ngFor='let col of columnDropdownStates'><form>
            <label *ngIf='col' class="checkbox ">
                <input type="checkbox" id={{col.field}} [checked]="col.visible" 
                 name={{col.header}} (change)="onColumnChange($event)"/>
                <span class="checkbox__input"></span>
                <span class="checkbox__label">{{col.header}}</span>
            </label></form>
        </ng-container>
    </popover-content>

我的 Angular/typescript 代码看起来像一个对象数组。

this.columnDropdownStates -:

     0: {header: "Name", field: "name", visible: true}
     1: {header: "Devices Enabled", field: "enabledDeviceNumber", visible: true}
     2: {header: "Description", field: "description", visible: true}

新更新 - 我确实收到此错误，但不确定它是什么意思

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: true'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

【问题讨论】：

你在使用视图子吗？
@AngelaAmarapala 没错。
columnDropdownStates prop 是如何在你的 typescript 文件中创建的？

标签： html angular ngfor

【解决方案1】：

有两种可能的修复方法，

如果您在 ngOnInit() 上初始化或分配 *ngIf 值，则必须将其移动到 ngAfterViewInit()，因为此时更改检测不适用于 ngOnInit()。另一个原因是，在大多数情况下，您的视图可能没有在 ngOnInit() 中初始化。
如果您使用的是 Angular 8 以上版本，您可能必须在创建 @ViewChild 时设置一个静态标志，因为它是 v8 的强制性要求。例如，

@ViewChild(TemplateRef, { static: }) templateRef : TemplateRef;

真假值取决于以下情况，

{ static: true } 如果您在ngOnInit 中访问ViewChild

{ static: false } 如果您在ngAfterViewInit 中访问。这也应该在您使用NgIf, NgFor, NgSwitch 或其他结构指令的场景中使用。

注意：在 Angular 9 中，静态标志默认为 false。

更多详情请参考this official discussion。

【讨论】：