TypeError:无法读取angular2中未定义的属性'ngDoCheck'

本文介绍了TypeError:无法读取angular2中未定义的属性'ngDoCheck'的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

在Child1组件中，我使用了 this.cdRef.detectChanges().但是，当我在同一父组件上添加Child2组件时.Child2组件实现AfterViewInit.它给了我例外

In Child1 component, I have used this.cdRef.detectChanges() . But when I add Child2 component on the same parent component. Child2 component implements AfterViewInit . It gives me exception

TypeError:无法读取angular2中未定义的属性'ngDoCheck'.

TypeError: Cannot read property 'ngDoCheck' of undefined in angular2.

请提出解决方案.

child1: export class MainFilterComponent implements AfterViewInit { constructor(){ this.cdRef.detectChanges(); } } Child2 export class MainCompareComponent implements AfterViewInit { constructor(){ } } export class MainFilterComponent implements AfterViewInit { countries: Country[] = []; filterToggled: boolean = false; filter: Filter; fromYears: Option[] = []; holder: any; institutions: Institution[] = []; isFullWidth: boolean; levels: Option[] = []; programs: Program[] = []; toYears: Option[] = []; stretchBox: any; @ViewChild('addBox') addBox: ElementRef; @ViewChild('chooselist') list: ElementRef; constructor(private translate: TranslateService, private filterService: FilterService, private zone: NgZone, private activatedRoute: ActivatedRoute, private router: Router, private elementRef: ElementRef, private renderer: Renderer, private cdRef: ChangeDetectorRef) { this.filter = filterService.getFilter(); this.getCountries(); this.getLevels(); this.getInstitutions(); this.getPrograms(); this.getYears(); this.updateFilterFromURL(); this.filterService.onFilterChanged$.subscribe(filter => this.onFilterChanged(filter)); } ngAfterViewInit(): void { jQuery.getScript('./app/components/filter/main-filter.js'); this.holder = this.list.nativeElement.parentNode.parentNode.parentNode; this.stretchBox = this.holder.firstElementChild; } onFilterChanged(filter: Filter) { this.filter = filter; this.cdRef.detectChanges(); if (this.list.nativeElement.children.length > 0) { this.renderer.setElementClass(this.list.nativeElement, 'select', true); } else if (this.list.nativeElement.children.length === 0) { this.renderer.setElementClass(this.list.nativeElement, 'select', false); } this.refreshWidth(); } refreshWidth() { var items = this.list.nativeElement.children; var listWidth = 0; for (var i = 0; i < items.length; i++) { listWidth += $(items[i]).outerWidth(true); } var newWidth; if (!items.length || $(this.addBox.nativeElement).outerWidth(true) + (listWidth + ($(this.list.nativeElement).outerWidth(true) - $(this.list.nativeElement).width())) > $(this.holder).width() * 0.7) { newWidth = ''; this.isFullWidth = true; } else { this.isFullWidth = false; newWidth = Math.floor((100 - (($(this.addBox.nativeElement).outerWidth(true) + (listWidth + ($(this.list.nativeElement).outerWidth(true) - $(this.list.nativeElement).width()))) / $(this.holder).width() * 100)) - 1 /** 10*/) /*/ 10*/ + '%'; } this.renderer.setElementStyle(this.stretchBox, 'width', newWidth); }

推荐答案

好吧，我不确定，但这可能是由于在材料组件上使用了flexLayout所致，所以请尝试将其替换为css框架

well I am not so sure but this may appear due to flexLayout used on material components so try to replace it with css framework