Question

我正在尝试实现一些评论功能，而且我遇到了一个问题，当对组件进行值更改时，视图值没有得到更新。

让我详细解释一下。

我需要知道我所处理的评论是长还是短。如果它很长，那么我想要展示“如何更多”。或者＆＃39;显示较少＆＃39; 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（）技巧，但似乎没有任何效果。

我确定这里有一些明显错误的东西，但我对这个角色的东西不熟悉。任何人都可以指出我正确的方向吗？

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

Answer 1

这似乎是由使用

引起的

ngAfterViewChecked()

而不是

ngAfterViewInit()

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

使用ViewChildren

1 个答案: