Блог

У меня есть api get, который выдает ответ на загрузку данных. Проблема здесь в том, что если я получаю около 25 результатов от api, я должен отображать только 9 результатов при первой загрузке, которые я реализовал таким образом. Но здесь проблема в том, что у меня должна быть кнопка «Показать больше», когда я нажимаю на нее, она должна показывать следующие 9 результатов, а остальные должны отображаться при повторном нажатии кнопки «Показать больше», но я не понимаю, как я это осуществлю и как я узнаю, что эти данные уже отображаются. И кроме того, пока загружается последний набор данных, я должен отобразить кнопку «Показать меньше». Кто-нибудь может помочь?

 if (response.length > 8) {
    this.resultList = response.slice(0, 8);
    this.isShowMore = true;
  }
  else {
    this.resultList = response;
    this.isShowMore = false;
  }
 

Вы можете реализовать это в простом решении, используя методы showLess ShowMore, которые обрабатывают переменную pageLimit.

Кроме того, я думаю, вы можете использовать пакет npm, который поможет вам, если вам нужно сделать что-то вроде прокрутки страниц

ngx-бесконечный-прокрутка

 @Component({
  selector: 'my-app',
  template: `
   <div>
  <h3> {{title}}</h3>
  <ul class="list">
      <li *ngFor="let l of list | slice : startPage:paginationLimit">{{l.name}} ({{l.age}})</li>
  </ul>
  <button class="show-more-btn" *ngIf ="paginationLimit < list.length" (click)="showMoreItems()">Show More</button>
  <button class="show-more-btn" *ngIf ="paginationLimit > 3" (click)="showLessItems()">Show Less</button>
</div>

  `,
})
export class App {
   title:String;
  list:any;
  startPage : Number;
  paginationLimit:Number; 
  constructor() {
    this.title = "Angular: Show more/show less pagination";
    this.list = [
      {name:'Prashobh',age:'25'},
      {name:'Abraham',age:'35'},
      {name:'Anil',age:'40'},
      {name:'Sam',age:'40'},
      {name:'Philip',age:'40'},
      {name:'Bal',age:'40'},
      {name:'Anu',age:'20'},
      {name:'Sam',age:'25'},
      {name:'Rocky',age:'35'},
      {name:'Major',age:'40'},
      {name:'Kian',age:'40'},
      {name:'Karan',age:'40'},
      {name:'Bal',age:'40'},
      {name:'Anu',age:'20'},
      {name:'Prashobh',age:'25'},
      {name:'Abraham',age:'35'},
      {name:'Anil',age:'40'},
      {name:'Sam',age:'40'},
      {name:'Philip',age:'40'},
      {name:'Bal',age:'40'},
      {name:'Anu',age:'20'}
    ]
    this.startPage = 0;
    this.paginationLimit = 3;
  }
  showMoreItems()
   {
      this.paginationLimit = Number(this.paginationLimit)   3;        
   }
   showLessItems()
   {
     this.paginationLimit = Number(this.paginationLimit) - 3;
   }
}