Tengo un problema con un proyecto angular-node. Tengo una lista de entidades(jugadores de futbol) la cual de carga bien en el html, cada jugador tiene la opcion de editar y ver gráfico de habilidades. El problema es que cuando presiono el botón Editar no se cargan los valores en el html, lo mismo cuando clickeo el botón Ver gráfico de habilidades.
export interface Player {
id: number,
long_name: string,
age: number,
club_name: string,
overall: number,
nationality_name: string,
potential: number,
skill_moves: number,
passing: number,
defending: number
}
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import {HttpClient} from '@angular/common/http';
import { Player } from '../models/player.model';
@Injectable({
providedIn: 'root'
})
export class PlayerService {
private baseUrl= 'http://localhost:3000/';
constructor(private http : HttpClient) { }
getPlayers(page: number, pageSize: number):Observable<any>{
return this.http.get(`${this.baseUrl}player/getPlayers?page=${page}&pageSize=${pageSize}`);
}
getById (id : number):Observable<Player>{
return this.http.get<Player>(`${this.baseUrl}player/getById/${id}`);
}
updatePlayer (id : number, player : Player):Observable<any>{
return this.http.put<any>(`${this.baseUrl}player/update/:${id}`, player);
}
createPlayer(player : Player):Observable<any>{
return this.http.post<string>(`${this.baseUrl}player/createPlayer`, player);
}
}
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { Player } from '../../models/player.model';
import { PlayerService } from '../../services/player.service';
import { Router, RouterModule } from '@angular/router';
@Component({
selector: 'app-player-list',
standalone: true,
imports: [CommonModule, RouterModule],
templateUrl: './player-list.component.html',
styleUrl: './player-list.component.scss'
})
export class PlayerListComponent {
players: Player[] = [];
currentPage: number = 1;
pageSize: number = 10;
totalPages: number = 0; // Total de páginas
pages: number[] = []; // Páginas visibles (de 10 en 10)
visiblePages: number = 10; // Número de páginas a mostrar a la vez
constructor(private playerService: PlayerService, private router: Router) { }
ngOnInit(): void {
this.listPLayers();
}
private listPLayers(): void {
this.playerService.getPlayers(this.currentPage, this.pageSize).subscribe({
next: (data: { players: Player[]; totalItems: number }) => {
if (data && data.players && typeof data.totalItems === 'number') {
this.players = data.players;
this.totalPages = Math.ceil(data.totalItems / this.pageSize);
this.updatePagination();
} else {
console.error('Estructura de datos no válida:', data);
this.players = []; // Limpiar la lista de jugadores si hay un error
this.totalPages = 0;
this.pages = [];
}
},
error: (error) => {
console.error('Error al obtener los jugadores:', error);
},
});
}
private updatePagination(): void {
// Cálculo de las páginas visibles
const startPage = Math.max(1, this.currentPage - Math.floor(this.visiblePages / 2));
const endPage = Math.min(this.totalPages, startPage + this.visiblePages - 1);
// Ajustar el rango de páginas visibles
this.pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => i + startPage);
}
goToPage(page: number): void {
if (page >= 1 && page <= this.totalPages) {
this.currentPage = page;
this.listPLayers(); // Llamar nuevamente para obtener los jugadores de esa página
}
};
editPlayer(id: number): void {
this.router.navigate(['/update', id]);
};
viewDetails(id: number): void {
this.router.navigate(['/details', id]);
}
}
player-list.component.html:
<div class="player-list-container">
<h2>Lista de Jugadores de FIFA</h2>
<table border="1">
<thead>
<tr>
<th class="hide-column">ID</th>
<th>Nombre Completo</th>
<th>Edad</th>
<th>Club</th>
<th>Calificación General</th>
<th>Nacionalidad</th>
<th>Potencial</th>
<th>Habilidad de Movimientos</th>
<th>Pase</th>
<th>Defensa</th>
<th>Grafico de habilidades</th>
<th>Edicion</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let player of players">
<td class="hide-column">{{ player.id }}</td>
<td>{{ player.long_name }}</td>
<td>{{ player.age }}</td>
<td>{{ player.club_name }}</td>
<td>{{ player.overall }}</td>
<td>{{ player.nationality_name }}</td>
<td>{{ player.potential }}</td>
<td>{{ player.skill_moves }}</td>
<td>{{ player.passing }}</td>
<td>{{ player.defending }}</td>
<td><button (click)="viewDetails(player.id)">Ver</button></td>
<td><button (click)="editPlayer(player.id)">Editar</button></td>
</tr>
</tbody>
</table>
<div class="pagination">
<button (click)="goToPage(currentPage - 1)" [disabled]="currentPage === 1">Anterior</button>
<ng-container *ngFor="let page of pages">
<button (click)="goToPage(page)" [class.active]="page === currentPage">{{ page }}</button>
</ng-container>
<button (click)="goToPage(currentPage + 1)" [disabled]="currentPage === totalPages">Siguiente</button>
</div>
Ocurre algo curioso cuando voy hago click en el botón Editar. Si uds se fijan en el metodo loadPLayer()
hago que imprima el objeto que recibe del backend console.log('Jugador:', JSON.stringify(data));
.
Pues bien, al cargar la página inmediatamente después de hacer click en editar no se imprime el objeto que recibe pero en el backend si busca al jugador por el id y lo imprime pues asi lo configure en el back.
En el front solo se imprime cuando actualizo la página.
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { PlayerService } from '../../services/player.service';
import { Player } from '../../models/player.model';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-player-edit',
standalone: true,
imports: [CommonModule, FormsModule],
templateUrl: './player-edit.component.html',
styleUrls: ['./player-edit.component.scss']
})
export class PlayerEditComponent implements OnInit {
player: Player = {
id: 0,
long_name: '',
age: 0,
club_name: '',
overall: 0,
nationality_name: '',
potential: 0,
skill_moves: 0,
passing: 0,
defending: 0
};
playerId: number | null = null;
constructor(
private route: ActivatedRoute,
private playerService: PlayerService,
private router: Router,
) { }
ngOnInit(): void {
this.route.paramMap.subscribe(params => {
const id = params.get('id');
this.playerId = id ? +id : null;
if (this.playerId !== null && !isNaN(this.playerId)) {
this.loadPlayer();
} else {
console.error("ID inválido:", this.playerId);
}
});
}
loadPlayer(): void {
if (this.playerId !== null && !isNaN(this.playerId)) {
this.playerService.getById(this.playerId).subscribe({
next: (data) => {
console.log('Jugador:', JSON.stringify(data));
if (data) {
this.player = data;
} else {
console.error("Jugador no encontrado");
}
},
error: (error) => {
console.error('Error al cargar jugador', error);
}
});
}
};
savePlayer(): void {
if (this.player && this.playerId !== null && !isNaN(this.playerId)) {
this.playerService.updatePlayer(this.playerId, this.player).subscribe({
next: () => {
this.router.navigate(['/']); // Redirige a la lista de jugadores después de guardar
},
error: (error) => {
console.error('Error al guardar los cambios', error);
}
});
}
};
}
Ahora bien, en el html el player-edit component agregué este pipe: {{ player | json }}
, y sí, me imprime el objeto en el navegador ni bien presiono el botón Editar en player-list.component.html
.
No sé por qué no está cargando los datos del jugador si el html esta recibiendo el objeto.
player-edit.component.html:
<div *ngIf="player">
<!-- Solo para depuración: muestra el objeto player como JSON -->
<pre>{{ player | json }}</pre>
<h2>Editar Jugador: {{ player.long_name }}</h2>
<h2>Editando a {{ player.long_name }}</h2>
<p>Edad: {{ player.age }}</p> <!-- Solo para verificar el dato -->
<p>Club: {{ player.club_name }}</p>
<form (ngSubmit)="savePlayer()">
<label for="name">Nombre Completo:</label>
<input type="text" id="name" [(ngModel)]="player.long_name" name="long_name" />
<label for="age">Edad:</label>
<input type="number" id="age" [(ngModel)]="player.age" name="age" />
<label for="club">Club:</label>
<input type="text" id="club" [(ngModel)]="player.club_name" name="club_name" />
<label for="overall">Calificación General:</label>
<input type="number" id="overall" [(ngModel)]="player.overall" name="overall"/>
<label for="nationality">Nacionalidad:</label>
<input type="text" id="nationality" [(ngModel)]="player.nationality_name" name="nationality_name" />
<label for="potential">Potencial:</label>
<input type="number" id="potential" [(ngModel)]="player.potential" name="potential" />
<label for="skill_moves">Habilidad de Movimientos:</label>
<input type="number" id="skill_moves" [(ngModel)]="player.skill_moves" name="skill_moves" />
<label for="passing">Pase:</label>
<input type="number" id="passing" [(ngModel)]="player.passing" name="passing" />
<label for="defending">Defensa:</label>
<input type="number" id="defending" [(ngModel)]="player.defending" name="defending" />
<button type="submit">Guardar</button>
</form>
</div>
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PlayerService } from '../../services/player.service';
import { Player } from '../../models/player.model';
import { Chart } from 'chart.js/auto';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-player-detail',
standalone: true,
imports:[CommonModule],
templateUrl: './player-details.component.html',
styleUrls: ['./player-details.component.scss']
})
export class PlayerDetailsComponent implements OnInit {
player: Player | null = null;
chart: Chart | null = null;
constructor(
private route: ActivatedRoute,
private playerService: PlayerService
) {}
ngOnInit(): void {
this.route.paramMap.subscribe(params => {
const id = +params.get('id')!; // Convierte el parámetro `id` a número
this.loadPlayer(id);
});
}
loadPlayer(id: number): void {
this.playerService.getById(id).subscribe({
next: (data) => {
this.player = data;
console.log(this.player);
this.createChart();
},
error: (error) => {
console.error("Error al cargar jugador", error);
}
});
}
createChart(): void {
if (this.player && !this.chart) {
this.chart = new Chart('playerChart', {
type: 'radar',
data: {
labels: ['Skill Moves', 'Passing', 'Defending', 'Overall', 'Potential'],
datasets: [{
label: this.player.long_name,
data: [
this.player.skill_moves,
this.player.passing,
this.player.defending,
this.player.overall,
this.player.potential
],
fill: true,
borderColor: 'rgba(75,192,192,1)',
backgroundColor: 'rgba(75,192,192,0.2)',
borderWidth: 2 // Ajusta el grosor de la línea
}]
},
options: {
responsive: true,
scales: {
r: {
beginAtZero: true,
ticks: {
stepSize: 10
}
}
}
}
});
}
}
}
player-details.component.html
<div *ngIf="player">
<h2>{{ player.long_name }}</h2>
<p>Edad: {{ player.age }}</p>
<p>Club: {{ player.club_name }}</p>
<p>Nacionalidad: {{ player.nationality_name }}</p>
<canvas id="playerChart"></canvas>
</div>
Ya probe con carga Directa en ngOnInit con loadPlayer()
.
Intententé cargar los datos del player en el método ngOnInit del componente de detalles usando ActivatedRoute para obtener el id desde la URL. Esto parecía funcionar solo al actualizar la página y no al navegar desde la lista.
Usé BehaviorSubject en el servicio de jugadores para compartir el estado del jugador entre componentes. Sin embargo, el html aun no recibía los datos cuando se navegaba desde la lista.
Console Logging para Depuración:
Utilicé console.log
tanto en el componente de lista como en el componente de detalles para verificar si los datos del player estaban cargados y ver si llegaban correctamente. En el frontend, parecía que los datos solo se imprimían al actualizar la página, pero no al hacer clic en el botón de "Editar" en la lista.
A pesar de estos intentos, el problema persiste al intentar cargar el player directamente al navegar, lo que sugiere que el flujo de datos o el enrutamiento puede estar interrumpiendo la transferencia de la información al componente de detalles.
Espero que puedan ayudarme a resolver este problema.
{ path: 'update/:id', component: PlayerDetailsComponent }
:export const routes: Routes = [ { path: '', component: PlayerListComponent }, { path: 'update/:id', component: PlayerEditComponent }, {path: 'details/:id', component: PlayerDetailsComponent} ];
paramMap
soloparams
->this.route.params.subscribe(...)