Angular 使用 ViewChildren 时未更新视图变量

Question

我正在尝试实现一些评论功能，但我遇到了运行一个问题，即当对组件进行值更改时视图值未更新。

让我详细解释一下。

我需要知道我正在处理的评论是长的还是短的。如果它很长，那么我想显示 'SHOW MORE' 或 'SHOW LESS' div。 html 看起来像这样：

<div class="comment-container" *ngFor="let comment of displayComments">
    <div #commentTextElement>{{comment.text}}</div>
    <div class="show-more" *ngIf="comment.isLong" (click)="showMore(comment)">
        <span *ngIf="comment.showMore === true">SHOW MORE</span>
        <span *ngIf="comment.showMore === false">SHOW LESS</span>
    </div>
</div

为此，我需要在检查视图后获取 div 长度的句柄，方法是像这样声明文本元素的句柄：

@ViewChildren('commentTextElement') commentTextElements: QueryList<any>;

然后调用一个简单的函数来设置 div，如下所示：

ngAfterViewChecked() {
    this.configureCommentsText();
}

配置评论功能如下所示：

configureCommentsText(): void {

    this.commentTextElements.forEach((item, index) => {
        if(item.nativeElement.offsetHeight > 80) {
            this.displayComments[index]['isLong'] = true;
            this.displayComments[index]['showMore'] = true;
        } else {
            this.displayComments[index]['isLong'] = false;
            this.displayComments[index]['showMore'] = false;
        }
    });
    this.cdRef.detectChanges();
}

我调用 detectChanges() 以确保更新对 displayComments 数组所做的更改。这一切都很好，并且它显示了所有内容。

但是，如果用户单击 show-more，则会调用 showMore() 函数，这会将 showMore 变量更改为 true/false，具体取决于它的当前值，如下所示：

showMore(comment): void {
    comment.showMore = !comment.showMore; 
    //this.cdRef.detectChanges();
}

但是这个 comment.showMore 值在函数中被更改，但视图中的值没有被更改。我已经通过使用一些放置良好的 console.logs 证明了这一点。我什至尝试过 detectChanges() 技巧，但似乎没有任何效果。

我敢肯定这里有明显的错误，但我是新手 angular。谁能指出我正确的方向？

编辑 1： 如果我删除 viewChildren 内容，showMore() 函数将按预期工作。那么 viewChildren 是怎么回事呢？

Answer 1

这似乎是使用

ngAfterViewChecked()

函数代替

ngAfterViewInit()

配置评论。当我改变这个时，行为按预期工作

Angular 使用 ViewChildren 时未更新视图变量

Angular View variable not being updated when using ViewChildren

angular

viewchild