javascript - 在 Angular 中添加记录后附加 HTML

Question

我有一个 Angular (v7) 项目，并且有一个组件的评论列表，如下所示。我在 *ngFor 循环中列出注释，并将新注释添加到列表中。不过，我在添加新评论后重新加载列表，我认为有更好的方法，即通过将新添加的评论与我之前在 JavaScript 中使用过的 HTML 相结合来附加新添加的评论。但不幸的是我还没有设法定义它(可能是由于循环)。在 Angular 中可能吗？

#comment-list.html:

<div *ngFor="let comment of comments">
    <div class="p-col"> {{ comment.UserName }} </div>
    <div class="p-col-12" [innerHTML]="comment.Body"></div>
</div>

我在添加新评论后调用以下方法:

#comment-list.ts:

listComments() {
    this.loading = true;
    service.listComments(this)
        .subscribe(data => {
            this.records = data.Data;
            this.loading = false;
        });
}

我想我应该使用新添加的评论数据重新创建一个 HTML 列表并将其附加到列表中，但是如何做呢？

Answer 1

您可以使用Spread operator 要做到这一点。假设您已经定义了 newComment 对象。要更新 View 中的列表，只需:

this.comments = [newComment, ...this.comments];

它将在列表的第一个位置插入 newComment 对象。