Angular4 - ExpressionChangedAfterItHasBeenCheckedError

Question

我知道有几个关于这个错误的问题的答案。我尝试过其中的几个都没有用，所以我想如果我提供一些特定于上下文的细节，可能会有人对这个问题有专门的洞察力。

我有一个父组件和子组件，它们都需要相互通信。这两个组件都相当健壮，因此我将尽量保持代码示例的简洁性。

用户表单组件-父组件

@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()道具与父级通信。当我更改settingsForDropdownSelectedCompanyId**，的下拉选项(但不是所有时间)时，就会发生错误。**

当然乐意提供更多的代码，如果它相关，但我希望它不太密集的阅读，以获得足够的上下文。对于任何有能力帮忙的人。

Answer 1

此错误通常会告诉您哪个变量已更改。你能提供那是什么吗？通常它是这样写的：“表达式已经改变了……somevar..previous值:假新值: true。

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