Angular ngFor items by 5

Question

我有一个我不知道如何解决的问题。例如，当您打开一个网站时，单击“显示更多”时会显示5条评论，再次单击时会显示5条更多评论。现在，所有内容都在一次打印完成。也许你们知道怎么处理这件事？

代码：

    <div class="comment" *ngFor="let comment of comments ">
      <app-student-comment [comment]="comment"></app-student-comment>
    </div>

下面是我获取数据的方式：

  this.commentService.getStudentComments({applicationId: this.application.id}).subscribe(data => {
            this.comments = data;
          });

服务：

  getStudentComments({ applicationId }): Observable<Comment[]> {
    return this.httpClient.get<Comment[]>(`${this.proxyurl}${this.url}${this.apiPath}/applications/${applicationId}/comments/applicant/visible`);
  }

Answer 1

在调用您的后台时，需要添加totalComments参数。

<div class="comment" *ngFor="let comment of comments ">
    <app-student-comment [comment]="comment"></app-student-comment>
</div>
<button (click)="addComments()">More</button>

在你的page.component.ts中

public totalComments = 5;
public comments = [];

...

ngOnInit() {
    this.getComments();
}

public getComments() {
    this.commentService.getStudentComments({
        applicationId: this.application.id,
        totalComments: this.totalComments
    }).subscribe(data => {
         this.comments = data;
    });
}

public addComments() {
    this.totalComments += 5;
    this.getComments();
}

在你的服务中：

getStudentComments({ applicationId, totalComments }): Observable<Comment[]> {
    return this.httpClient.get<Comment[]>(
    `${this.proxyurl}${this.url}${this.apiPath}/applications/${applicationId}/comments/total/${totalComments}/applicant/visible`
    );
}

然后，您需要更新您的后端代码以使用此totalComments参数，例如，使用SQL查询：

this.db.query(`SELECT * FROM comments LIMIT $1`, [totalComments]);