Angular中改造HTTP请求获取控球后卫（position===1）数据咨询

当前你是请求全部球员数据后在前端通过filter筛选位置为1的球员，要改成直接通过HTTP请求的查询参数让后端返回筛选后的数据，步骤如下：

1. 修改服务中的请求方法 #

直接在Get请求里添加position查询参数，让后端（比如你用的json-server）自动返回符合条件的数据，去掉前端的过滤逻辑：

修改roster-data.service.ts中的jSON_Server_ReadPointGuards方法：

jSON_Server_ReadPointGuards():Observable<Player[]> {
  return this.http.get<Player[]>(`${this.devURL}/roster_GoldenStateWarriors`, {
    // 添加查询参数position=1，注意转成字符串类型
    params: { position: '1' }
  }).pipe(
    // 移除前端过滤的map操作
    catchError(this.handleError)
  );
}

2. （可选）封装通用查询方法 #

如果后续需要查询其他位置的球员，可以封装一个通用方法，避免重复代码：

// 在roster-data.service.ts中新增方法
getPlayersByPosition(position: number):Observable<Player[]> {
  return this.http.get<Player[]>(`${this.devURL}/roster_GoldenStateWarriors`, {
    params: { position: position.toString() }
  }).pipe(
    catchError(this.handleError)
  );
}

然后在组件中调用这个方法获取控球后卫数据：

// 修改players.component.ts中的dev_SuscribeAllPointGuards方法
dev_SuscribeAllPointGuards(){
  this._rosterDataService.getPlayersByPosition(1).subscribe(
    pointguards => {
      this.bases = pointguards;
    }  
  );
}

为什么这么改？ #

• 减少不必要的数据传输：只请求需要的控球后卫数据，节省带宽，尤其当球员列表很大时更明显
• 逻辑更合理：筛选逻辑交给后端处理，前端专注于数据展示

相关代码文件 #

roster-data.service.ts

import { Injectable } from '@angular/core';
import { Player } from "../models/player";
import { environment } from "../../environments/environment";
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {Observable, throwError} from 'rxjs';
import {catchError, map, filter } from 'rxjs/operators';

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

  private readonly devURL = environment.url;
  
  constructor(private http: HttpClient) {
  }

  jSON_Server_ReadPointGuards():Observable<Player[]> {
    return this.http.get<Player[]>(`${this.devURL}/roster_GoldenStateWarriors`).pipe(
      map(players => players.filter((player:Player) => player.position === 1)
      ),
      catchError(this.handleError)
    );
  }
}

player.ts

export interface Player {

  fullName: string,
  shirtNumber: string,
  position: number,
  height: string,
  weight: number,
  points: number,
  rebounds: number,
  assists: number,
  blocks: number,
  steals: number,
  imageFile: string,
  imageDescrip: string
  
}

players.component.ts

import { Component, OnInit, isDevMode } from '@angular/core';
import { RosterDataService } from "../../services/roster-data.service";
import { Player } from "../../models/player";
import { imgRoute } from "../../services/img-route.service";

@Component({
  selector: 'app-players',
  templateUrl: './players.component.html',
  styleUrls: ['./players.component.scss'],
  providers: [RosterDataService]
})
export class PlayersComponent implements OnInit {
  public imageLocation:string;
  public bases!: Player[];
  public escoltas!: Player[];
  public aleros!: Player[];
  public alaPivots!: Player[];
  public pivots!: Player[];
  public getPlayers: Player[] = [];


  constructor(private _rosterDataService: RosterDataService) {
    this.imageLocation = imgRoute.path;
    
  }

  ngOnInit(): void {
    
    this.dev_SuscribeAllPointGuards();
    // this.dev_SuscribeAllShootingGuards();
    // this.dev_SuscribeAllSmallForwards();
    // this.dev_SuscribeAllPowerForwards();
    // this.dev_SuscribeAllCenters();
  }

  dev_SuscribeAllPointGuards(){
    this._rosterDataService.jSON_Server_ReadPointGuards().subscribe(
      pointguards => {
        this.bases = pointguards;
      }  
    );
  }
}

players.component.html

<section>
    <article>
        <h4 id="pointGuard">{{ "players.firstTitle" | translate }}</h4>
        <div class="gallery">
            <div [routerLink]="'/'+(base.fullName | removespaces)+'/'+base.shirtNumber"  *ngFor="let base of bases;">
                <figure><img src="{{imageLocation + base.imageFile}}" alt="{{base.imageDescrip}}" title="{{base.imageDescrip}}"></figure>
                <section>
                    <h5>{{base.fullName}}</h5>
                    <h6>{{base.shirtNumber}}</h6>
                    <h6>{{base.points}}</h6>
                    <h6>{{base.rebounds}}</h6>
                    <h6>{{base.assists}}</h6>
                    <h6>{{base.blocks}}</h6>
                    <h6>{{base.steals}}</h6>
                </section>
            </div>
        </div>
    </article>
</section>

内容的提问来源于stack exchange，提问作者Eric Díaz