Question

我正在尝试使用此SO Question中的ngFor中的组件，但我收到错误（表达式在检查后已更改。上一个值：＆＃39; undefined＆＃39;。当前值：＆＃ 39;假＆＃39;。）

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中使用Component会导致错误

1 个答案: