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

请提出解决方案.

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

这篇关于TypeError:无法读取angular2中未定义的属性'ngDoCheck'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！