Angular加载更多图片功能修复：按钮无法追加图片的解决方法

问题分析 #

按钮失效的核心原因有两点：

1. 组件中直接用新数据覆盖旧数组，而非追加
2. 服务中处理状态更新的方式不符合RxJS规范，页码计算逻辑冗余

1. 修复组件的数据追加逻辑 #

修改dogsList.component.ts中的onFetchDogsFromApi方法，将数据覆盖改为追加：

onFetchDogsFromApi(): void {
  this.httpService.fetchDogsFromApi().subscribe(
    (response) => {
      // 合并新旧数组实现追加效果
      this.doggos = [...this.doggos, ...response];
      // 也可以用push语法：this.doggos.push(...response);
    }
  );
}

2. 优化服务的页码计算与状态更新 #

修改http.service.ts，简化页码逻辑并使用RxJS的tap操作符处理副作用：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators'; // 导入tap操作符
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;

    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(
        // 用tap处理状态更新的副作用
        tap(() => {
          this.DOGS_FETCHED += this.DOGS_TO_FETCH;
        })
      );
  }
}

3. 可选：模板安全绑定优化 #

修改dogsList.component.html中的图片绑定，避免item.image为null时报错：

<img [src]="item.image?.url" class="zoom-img" routerLink="/home/{{item.id}}" />

修改完成后，点击「Get dogs」按钮即可每次追加加载15张新图片，初始加载也能正常显示15张数据。

内容的提问来源于stack exchange，提问作者user20548183