ngForでコンポーネントを使用するとエラーが発生する

Question

このSO QuestionからngForでコンポーネントを使用しようとしていますが、エラーが発生しました（チェックした後に式が変更されました。 。

エラーは、onAfterViewInit関数でスローされます。変数を初期化するより良い方法はありますか？

export class ReadMoreComponent implements AfterViewInit { 

/** 
* the text that need to be put in the container 
*/ 
@Input() 
public text: string; 

/** 
* maximum height of the container in [em] 
*/ 
@Input() 
public maxHeight: number = 4; 


/** 
* set these to false to get the height of the expanded container 
*/ 
protected isCollapsed: boolean; 
protected isCollapsable: boolean; 

constructor(private elementRef: ElementRef) { 
} 

public ngAfterViewInit() { 
    this.doWork(); 
} 

protected onResize(event) { 
    this.doWork(); 
} 

/** 
* collapsable only if the contents make container exceed the max height 
*/ 
private doWork() { 
    if (this.calculateContainerHeight() > this.maxHeight) { 
     this.isCollapsed = true; 
     this.isCollapsable = true; 
    } 
    else { 
     this.isCollapsed = false; 
     this.isCollapsable = false; 
    } 
} 

/** 
* Calculate height of content container. 
*/ 
private calculateContainerHeight(): number { 
    let container = this.elementRef.nativeElement.getElementsByTagName('div')[0]; 
    let lineHeight = parseFloat($(container).css("line-height")); 
    let currentHeight = Math.ceil(container.offsetHeight/lineHeight); 
    return currentHeight; 
} 
} 

Plunkの例を示します。

Answer 1

ngAfterViewInit()が変更検出によって呼び出され、変更検出によってモデルの変更が発生すると、このエラーメッセージが表示されます。

constructor(private elementRef: ElementRef, private cdRef:ChangeDetectorRef) {} 

public ngAfterViewInit() { 
    this.doWork(); 
    this.cdRef.detectChanges(); 
} 

Plunker example