How to make pagination with observable-CodePudding

I have car-list.component.ts with:

**export class CarListComponent implements OnInit {

public cars$!: Observable<CarInterface[]>;

constructor(
private carService: CarService
#   ) {
#   }

ngOnInit(): void {
this.cars$ = this.carService.getAllCars();
#   }

# }**

car.service.ts

**export class CarService {

  constructor(
    private httpClient: HttpClient
  ) {
  }

  public getAllCars(): Observable<CarInterface[]> {
    return this.httpClient.get<CarInterface[]>('http://localhost:8080/car/cars');
  }

}**

and car.list.html

<body>
<div >
  <div >
    <div >
      <div >

        <div *ngFor="let car of cars$ | async" >

          <div >

            <img src="{{'data:image/jpg;base64,'   car.image }}" alt="">
            <h3>{{ car.name }}</h3>

            <div >{{ car.price | currency:'USD' }}</div>
            <button >Add to cart</button> <!--(click)="addToCart(tempProduct)"-->
          </div>

          <br>

        </div>

      </div>

      <!-- begin footer -->
      <div >
        <div >
<!--          <div >-->
<!--            <select  [value]="carsPerPage" (change)="changePageSize($event)">-->
<!--              <option value="4">4</option>-->
<!--              <option value="8">8</option>-->
<!--              <option value="12">12</option>-->
<!--              <option value="16">16</option>-->
<!--              <option value="20">20</option>-->
<!--            </select>-->
<!--          </div>-->

          <div >
<!--            <button  *ngFor="let page of pageNumbers">1</button>-->
<!--            <button >2</button>-->
<!--            <button >3</button>-->
<!--            <button >4</button>-->
          </div>
        </div>
      </div>
      <!-- end footer -->
    </div>
  </div>
</div>
</body>

how to make pagination?

try

        <div >
<!--          <div >-->
<!--            <select  [value]="carsPerPage" (change)="changePageSize($event)">-->
<!--              <option value="4">4</option>-->
<!--              <option value="8">8</option>-->
<!--              <option value="12">12</option>-->
<!--              <option value="16">16</option>-->
<!--              <option value="20">20</option>-->
<!--            </select>-->
<!--          </div>-->

          <div >
<!--            <button  *ngFor="let page of pageNumbers">1</button>-->
<!--            <button >2</button>-->
<!--            <button >3</button>-->
<!--            <button >4</button>-->
          </div>

I tried to make a method that would help me implement pagination, but I can't get the length from cars$.wanted to take this function: return Array(Math.ceil(Number(this.cars$.subscribe(result => result.length)) / this.carsPerPage)), but an error occurred.

CodePudding user response：

Try below line of code :

  <ul>
<li *ngFor="let car of cars$ | async">
  {{car.name}} {{car.model}}
</li>
<div *ngIf="cars$ | async as cars"> There are this many cars: {{cars.length}}
</div>

For more information check this link : [https://stackoverflow.com/questions/53642580/length-property-does-not-exist-with-observables][1]

CodePudding user response：

you can use rxjs operator tap to get the length of the array and store in a variable. the "tap" operator execute the function inside when "someone" subscribe to the observable.

countCars=0;
pages:any[]=[]
this.cars$ = this.carService.getAllCars().pipe(
  tap((res:any[])=>{
       this.countCars=res.length; //if you want the length
       //we can create an array -only I'm interesting in the length-
       this.pages=new Array(Math.ceil(res.length/3))
  }));

Some like

<div
  *ngFor="
    let cars of cars$
      | async
      | slice: page * pageSize:page * pageSize   pageSize
  "
>
  {{ cars.id }} - {{ cars.text }}
</div>
<button (click)="page = page - 1">prev</button>
<button *ngFor="let pag of pages; let i = index" (click)="page = i">
  {{ i   1 }}
</button>
<button (click)="page = page   1">next</button>

makes the "pagination"

See stackblitz