复选框加载但未单击HTML Angular

Question

有一个奇怪的问题，复选框加载了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 ?

Answer 1

有两种可能的修复方法，

1. 如果在ngOnInit()上初始化或分配*ngIf值，则必须将其移动到ngAfterViewInit()，因为此时更改检测在ngOnInit((上不起作用。另一个原因是，在大多数情况下，您的视图可能没有在ngOnInit((中初始化。

2. 如果您使用的是Angular版本的8以上版本，您可能需要在创建@ViewChild时设置一个静态标志，因为它是v8中的强制性标志。例如，

   @ViewChild(TemplateRef，｛static:｝(TemplateRef:TemplateRef

真值或假值取决于以下情况，

如果您正在ngOnInit中访问ViewChild，则为{ static: true }

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

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

有关更多详细信息，请参阅本次官方讨论。