Angular4-ExpressionChangedAfterItHasBeenCheckedError

Question

我知道與SO上此錯誤相關的問題的幾個答案。 我已經嘗試了其中的幾個嘗試，但都無濟於事，所以我想出了如果我提供一些特定於上下文的詳細信息，那么也許有人會對這個問題有更深入的了解。

我有一個父級和子級組件，它們都需要相互通信。 這兩個組件都相當健壯，因此我將嘗試使代碼示例盡可能簡潔。

用戶表單組件-父組件

@Component({
    selector: 'hl2-user-form',
    templateUrl: './user-form.component.html',
    styleUrls: ['./user-form.component.scss']
})
export class UserFormComponent extends BaseComponentService implements OnInit, OnDestroy {
    @Input() model: PanelModel;

    // use to track changes in assigned user companies in grid
    userCompanies: UserCompanyModel[] = [];
    companies: CompanyModel[] = [];
    userForm: FormGroup;
    confirmation: IConfirmationModel;
    statusEnum = StatusEnum;
    systemParameterMessage: string = '';

    rowData: Array<any> = [];

    selectedDepartmentsAssigned: IUserFormDepartmentsAssignedGridViewModel[] = [];
    selectedUserRolesAssigned: IUserRoleAssignedViewModel[] = [];

    gridOptions: GridOptions = <GridOptions>{};
    gridData: BehaviorSubject<any> = new BehaviorSubject(null);
    isEdit: BehaviorSubject<boolean> = new BehaviorSubject(null);

    defaultCompanyOptions: SelectItem[] = [];
    userTypeOptions: SelectItem[] = [];
    defaultApplicationOptions: SelectItem[] = [];
    settingsForOptions: SelectItem[] = [];
    settingsForDropdownSelectedCompanyId: number = null;
    emergencyRoleIdSelected: number = null;
    isChildComponentReadyForLoad: boolean = false;

    constructor(route: ActivatedRoute,
                public userService: UserService,
                public cdRef: ChangeDetectorRef,
                private formBuilder: FormBuilder,
                private helpUrlService: HelpUrlService,
                private adminPanelService: AdminPanelService,
                private panelService: PanelService,
                public adminConfirmationService: AdminConfirmationService,
                private messageTranslatorService: MessageTranslatorService,
                private companyService: CompanyService,
                private gridStateService: GridStateService,
                private applicationService: ApplicationService,
                private systemParameterService: SystemParameterService) {
        super(route);
    }

用戶表單組件模板/標記（相關性）-父組件

<!--far much more parent-component (user-form) mark-up above this line-->
            <button pButton class="ui-button-info" label="{{'Lang.Admin.Help' | translate}}"
                    (click)="onHelpClicked()"></button>
            <button pButton label="test button" (click)="test()">TEST BUTTON</button>
        </div>
    </div>
    <hr/>
    <hl2-company-specific-security-settings *ngIf="isEdit.value && isChildComponentReadyForLoad" [companies]="companies" [confirmation]="confirmation"
                                            [defaultCompanyOptions]="defaultCompanyOptions"
                                            [isEdit]="isEdit" [userCompanies]="userCompanies"
                                            [settingsForOptions]="settingsForOptions"
                                            [settingsForDropdownSelectedCompanyId]="settingsForDropdownSelectedCompanyId"
                                            (selectedDepartmentsAssigned)="onDepartmentsSelected($event)"
                                            (selectedUserRolesAssigned)="onUserRolesSelected($event)"
                                            (selectedEmergencyRoleId)="onEmergencyRoleIdSelected($event)">
    </hl2-company-specific-security-settings>

公司特定的安全設置組件-子組件

@Component({
    selector: 'hl2-company-specific-security-settings',
    templateUrl: './company-specific-security-settings.component.html',
    styleUrls: ['./company-specific-security-settings.component.scss']
})

export class CompanySpecificSecuritySettingsComponent extends BaseComponentService implements OnInit, OnDestroy,
    OnChanges {
    @Input() userCompanies: UserCompanyModel[] = [];
    @Input() confirmation: ConfirmationModel = null;
    @Input() defaultCompanyOptions: SelectItem[] = [];
    @Input() isEdit: BehaviorSubject<boolean> = new BehaviorSubject(null);
    @Input() companies: CompanyModel[] = [];
    @Input() settingsForOptions: SelectItem[] = [];
    @Input() settingsForDropdownSelectedCompanyId: number = null;

    @Output() selectedDepartmentsAssigned: EventEmitter<IUserFormDepartmentsAssignedGridViewModel[]>
        = new EventEmitter<IUserFormDepartmentsAssignedGridViewModel[]>();
    @Output() selectedUserRolesAssigned: EventEmitter<IUserRoleAssignedViewModel[]>
        = new EventEmitter<IUserRoleAssignedViewModel[]>();
    @Output() selectedEmergencyRoleId: EventEmitter<number> = new EventEmitter<number>();

    emergencyRoleOptions: SelectItem[] = [];
    emergencyRoleIdSelected: number = null;

    departmentAssignedRowData: Array<IUserFormDepartmentsAssignedGridViewModel> = [];
    userRoleAssignedRowData: Array<IUserRoleAssignedViewModel> = [];
    initialDepartmentsAssignedRows: Array<IUserFormDepartmentsAssignedGridViewModel> = [];
    initialUserRolesAssignedRows: Array<IUserRoleAssignedViewModel> = [];

    departmentAssignedGridOptions = <GridOptions>{
        onRowSelected: () => {
            this.emitSelectedDepartments();
        }
    };

    userRoleAssignedGridOptions = <GridOptions>{
        onRowSelected: () => {
            this.emitSelectedRoles();
        }
    };

    constructor(route: ActivatedRoute,
                public userService: UserService,
                public cdRef: ChangeDetectorRef,
                public adminConfirmationService: AdminConfirmationService,
                private roleService: RoleService,
                private departmentService: DepartmentService) {
        super(route);
    }

公司特定的安全設置模板/標記（相關性）-子組件

<div class="flex-component">
    <h4 class="center-header">{{'Lang.Admin.CompanySpecificSettings' | translate}}</h4>
    <h5>{{'Lang.Admin.SecuritySettings' | translate}}</h5>
    <div class="company-specific-dropdowns">
        <label>{{'Lang.Admin.SettingsFor' | translate}}</label>
        <p-dropdown [options]="settingsForOptions" [autoWidth]="false" (onChange)="onSettingsForSelectionChanged()"
                    [(ngModel)]="settingsForDropdownSelectedCompanyId" [ngModelOptions]="{standalone: true}"></p-dropdown>
        <label>{{'Lang.Admin.EmergencyAccessRole' | translate}}</label>
        <p-dropdown [options]="emergencyRoleOptions" [autoWidth]="false" [(ngModel)]="emergencyRoleIdSelected"
                    (onChange)="setEmergencyRoleId()"
                    [ngModelOptions]="{standalone: true}"></p-dropdown>
    </div>

如您所見，我正在使用@Output()道具與父母@Output() 。 當我更改settingsForDropdownSelectedCompanyId的下拉選擇時（並非始終），將發生錯誤。

當然可以提供更多相關的代碼，但我希望它不會太密集以致無法通讀以獲取足夠的上下文。 TIA適用於可能會提供幫助的任何人。

Answer 1

該錯誤通常會告訴您哪個變量已更改。 你能提供那是什么嗎？ 通常，它說的是這樣的：“表達式已更改..... somevar ..先前的值：false新的值：true。一種解決方法是：

<hl2-company-specific-security-settings
[hidden]="!isEdit.value || !isChildComponentReadyForLoad"
[companies]="companies" [confirmation]="confirmation"