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 /打字稿代码看起来像一个对象数组。

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

有两种可能的修复方法，

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

@ViewChild（TemplateRef，{static：}）templateRef：TemplateRef;

是非值取决于以下情况，

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

{ static: false }（如果您在ngAfterViewInit中进行访问）。在使用NgIf, NgFor, NgSwitch或其他结构性指令的情况下，也应使用此方法。

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

有关更多详细信息，请参阅this official discussion。

复选框加载但未单击HTML Angular

1 个答案: