如何在角度 6 中添加计数器？

Question

我有一个从服务器获取评论的功能，我想显示服务器中可用的评论总数。

这是 .ts 文件中的函数：

 this.activeRouter.params.subscribe(params => {
   // tslint:disable-next-line:prefer-const
   let id = params['id'];
   this.userService.getComments(id)
     .pipe(
       map(data => data.sort((a, b) => new Date(b.localTime).getTime() - new Date(a.localTime).getTime()))
      )
      .subscribe(data => this.comments = data);
});

这是服务中的get函数

  getComments (id: number) {
    return this.http.get<Comment[]>(this.commentsUrl);
  }

这是用于显示评论的 html

 <div class="comments-description" *ngFor="let comment of comments">
        <span class="comments_count">(353)</span>
      <div class="comments-photo">
        <img src="https://randomuser.me/api/portraits/men/84.jpg" alt="">
      </div>
      <div class="comments_wrapper">
        <div class="comments_details">
          <h1>{{comment.author}}</h1>
          <span class="days">1d</span>
        </div>
        <div class="comments_text">
          <p>{{comment.description}} </p>
        </div>
      </div>
    </div>

Answer 1

为什么不简单地使用长度

<span class="comments_count">{{comments.length}}</span>

Answer 2

如果您在回复中收到所有评论，则可以使用comments.length

<span class="comments_count">{{comments.length}}</span>

但最佳实践是从 API 端获取。 在您的 API 响应中再添加一个用于评论计数的字段。

Answer 3

解决方案：

从服务器获取评论数据时，您必须随新数据一起返回评论总数。

一旦您调用服务，您就可以在一个数组中添加数据。 并在一个变量中设置总计数。

注意：您必须从服务器读取计数并在相同的 API 或服务中返回结果

Answer 4

更新您的 API 并使用 API 获取评论数并显示您的评论数。

Answer 5

这样的计数器必须在服务器端。

例如，帖子有 10000 条评论。

1 个请求不会全部获取，只会获取一部分（页面）。

把它们都拿来只找出一个计数是不好的。

所以响应应该包含一个“计数”字段。