How to get more images in Angular?-CodePudding

15 images appear at the beginning from API, the get dogs button has the function of loading an additional 15 images (and so on), but it doesn't work. How to make the button work?

http.service.ts - service with API and HttpClient

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { DogInfo } from '../interface/dogInfo';

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

  httpHeaders = new HttpHeaders({
    Authorization: 'YOUR_KEY_HERE',
  });

  DOGS_FETCHED = 0;
  DOGS_TO_FETCH = 15;

  constructor(private http: HttpClient) {}

  fetchDogsFromApi(): Observable<DogInfo[]> {
    const page = (this.DOGS_FETCHED   this.DOGS_TO_FETCH) / this.DOGS_TO_FETCH - 1;

    const url = `https://api.thedogapi.com/v1/breeds?page=${page}&order=desc&limit=${this.DOGS_TO_FETCH}`;

    return this.http.get<DogInfo[]>(url, { headers: this.httpHeaders })
      .pipe((response) => {
        this.DOGS_FETCHED  = this.DOGS_TO_FETCH;
        return response;
      });
  }
}

dogsList.component.ts - fetching images from HttpService and getDogs function

import { AfterViewInit, Component } from '@angular/core';
import { HttpService } from 'src/app/service/http.service';

@Component({
  selector: 'app-dogsList',
  templateUrl: './dogsList.component.html',
  styleUrls: ['./dogsList.component.css']
})
export class DogsListComponent implements AfterViewInit {

  constructor(private httpService: HttpService) {}

  doggos: any = [];
  
  onFetchDogsFromApi(): any {
    this.httpService.fetchDogsFromApi().subscribe(
      (response) => this.doggos = response
    );
  }

  getDogs() {
    this.onFetchDogsFromApi();
  }

  ngAfterViewInit(): void {
    this.onFetchDogsFromApi();
  }
}

dogsList.component.html - list of images with ngFor directive

<div >
    <div id="dogs">
        <div *ngFor="let item of doggos" >
            <p style="display: none;">{{item.id}}</p>
            <img src={{item.image.url}} ngClass="zoom-img" routerLink="/home/{{item.id}}" />
        </div>
    </div>

    <button  (click)="getDogs()">Get dogs</button>
</div>

CodePudding user response：

you always ask about the same URL.

Use

fetchDogsFromApi(page:number,limit:number): Observable<DogInfo[]> {
   const url = `https://api.thedogapi.com/v1/breeds?page=${page}&order=desc&limit=${limit}`;
..
}

And call to your service as

this.page  ;
this.onFetchDogsFromApi(this.page,10);

NOTE: It's better "control" the page from the component, not form the service

CodePudding user response：

Looks like you always override existing 15 images with the next 15 images.

Instead of overriding it, you should just add the next 15 images to the existing array. So, instead of this:

this.httpService.fetchDogsFromApi().subscribe(
  (response) => this.doggos = response
);

Do this:

this.httpService.fetchDogsFromApi().subscribe(
  (response) => this.doggos.push(...response)
);

CodePudding user response：

You have to append the doggos array with the new response as shown below.

this.httpService.fetchDogsFromApi().subscribe(
  (response) => this.doggos = [...this.doggos, ...response];
);