在 ngFor 中使用组件会导致错误

Question

我正在尝试使用此中的 ngFor 组件，但出现错误（检查后表达式已更改。先前值：'undefined'。当前值：'false'.).

在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

在 ngFor 中使用组件会导致错误

Using Component in ngFor causes Error

ngfor

angular-components

angular