Как пагинат из данных исходит от JSON в Angular

Question

Я новичок в этом, у меня есть служба с HTTPclient, это получить все данные из файла JSON, иметь регистр 1000, как я могу сделать нумерацию страниц, например, показать первые 10 и разбить их на страницы

этомой сервис

@Injectable({
  providedIn: 'root'
})
export class ProductsService {

  constructor(private http:HttpClient ) { 
  }

  getPorducts(): Observable<Product[]> {

    return this.http.get<Product[]>('assets/data/DATA.json');

  }
}

Я просто использую его на своем домашнем компоненте

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styles: []
})
export class HomeComponent implements OnInit {

  public products: any[] = [];


  constructor(private _Products: ProductsService) { }

  public lastKey: any[] = [];

  ngOnInit() {
    this._Products.getPorducts().subscribe(data => {
      if (data) {
        this.products = data;
      }
    });


  }

Как я могу это сделать? заранее спасибо

Answer 1

Давайте начнем с чтения данных из сервиса ( В сервисе мы читаем данные из файла json )

export class AppComponent implements OnInit {

 public products: any[] = [];

 curPage: number;
 pageSize: number;

 constructor(private _Products: ProductService) { }

 ngOnInit(): void {
   this._Products.getJSON().subscribe(response => {
     this.products = response.items;
   });

   this.curPage = 1;
   this.pageSize = 10; // any page size you want 
 }

 numberOfPages() {
   return Math.ceil(this.products.length / this.pageSize);
 };
}

Здесь мы добавили две переменные, curPage и pageSize которые могут быть обновлены в соответствии с требованием. (нажмите) переместит пользователя на нужную страницу. Вы можете обновить внешний вид для управления разбиением на страницы в соответствии с вашими потребностями.

и, наконец, в своем HTML:

 <table class="table table-sm table-bordered">
     <thead>
         <tr>
             <th>Id</th>
             <th>Name</th>
         </tr>
     </thead>
     <tbody>
         <tr *ngFor="let item of products | slice: (curPage * pageSize) - pageSize :curPage * pageSize">
             <td>{{item.id}}</td>
             <td>{{item.name}}</td>
         </tr>
     </tbody>
 </table>
 <p class="pagination">
     <button [disabled]="curPage == 1" (click)="curPage = curPage - 1">PREV</button>
     <span>Page {{curPage}} of {{ numberOfPages() }}</span>
     <button [disabled]="curPage >= list.length/pageSize" (click)="curPage = curPage + 1">NEXT</button>
 </p>

Stackblitz Здесь

Другой способ - использовать пакет NPM : ngx-pagination

Шаг 1 : выполнить указанную ниже команду через терминал

npm install ngx-pagination --save

Шаг 2 : чтение формы данных Служба

export class AppComponent implements OnInit {

 public products: any[] = [];
 constructor(private _Products: ProductService) { }

 ngOnInit(): void {
   this._Products.getJSON().subscribe(response => {
     this.products = response.items;
   });
 }

}

Шаг 3 : импорт зависимости в app.module.ts

import { NgxPaginationModule } from 'ngx-pagination';
@NgModule({
   declarations: [
       AppComponent
   ],
   imports: [
       BrowserModule,
       NgxPaginationModule --> this line
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Теперь давайте посмотрим на код внутри app.module.ts, куда был импортирован модуль ngx-pagination

Шаг 4 : обновить представление из app.component.html

<table class="table table-sm table-bordered">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of products  | paginate:{itemsPerPage: 5, currentPage:p}">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
        </tr>
    </tbody>
</table>
<pagination-controls (pageChange)="p=$event"></pagination-controls>

Шаг 5 : запустить приложение Запустить приложение через терминал с запуском npm

Stackblitz Here