Angular нгДля предметов по 5

Question

У меня есть вопросы, которые я не знаю, как решить. Например, когда вы открываете сайт, появляется 5 комментариев, когда вы нажимаете «Показать еще 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]);