Angular4 - ExpressionChangedAfterItHasBeenCheckedError

时间:2017-12-15 17:48:14

标签: javascript angular angular2-forms

我知道有关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()道具与父母沟通。 当我更改settingsForDropdownSelectedCompanyId的下拉选项时发生错误,但不是所有时间。

当然提供更多相关的代码,但我希望它不会太密集,无法通读以获得足够的上下文。任何可能提供帮助的人都可以参加TIA。

1 个答案:

答案 0 :(得分:0)

此错误通常会告诉您哪个变量已更改。你能提供什么吗?通常它会说:&#34;表达式已经改变了...... somevar..previous值:false new value:true。解决方法是:

var someString: String = ""
someString.init(describing: 5) // Not possible, doesn't compile. Can't call an initializer on an _instance_ of String
var someStringType: String.Type = String.self
someStringType.init(describing: 5) // Iniitializes a String instance "5"