Tengo un componente de publicación y quiero mostrar muchas publicaciones en la misma página obteniendo los datos de la publicación por su ID del lado del servidor, pero todas las publicaciones muestran los mismos datos de una publicación. ¿Cómo mostrar los datos de cada publicación?
<app-post *ngFor="let post of posts" [postId]="post"></app-post> import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'], }) export class HomeComponent implements OnInit { constructor( ) {} posts = [ '62653bd48622e648819139e2', '626565e78622e64881913bda', '6264878bdb7ea6a449ca9698', '62658e988622e648819140e0', '62658f218622e64881914118', '6265903c8622e6488191416d', ]; ngOnInit(): void {} } @Component({ selector: 'app-post', templateUrl: './post.component.html', styleUrls: ['./post.component.scss'], }) export class PostComponent implements OnInit { @Input() postId!: string; postData: PostData = this.postService.initialPostData; postDataAssigned = false; constructor( private postService: PostService, private userInfoService: UserInfoService ) {} ngOnInit() { this.preparePostData(); } preparePostData() { this.postService.getPostById(this.postId).subscribe((res) => { // assign the res data to the postData variabale }); } }Está asignando sus datos a una propiedad de un servicio compartido, por lo que todos los componentes comparten la misma variable. Los objetos se asignan por referencia, por lo que no está creando una copia separada en cada componente.
Con esta línea:
postData: PostData = this.postService.initialPostData; Acaba de crear un alias para initialPostData en lugar de un nuevo objeto.
Puede clonar los datos iniciales así:
postData: PostData = JSON.parse(JSON.stringify(this.postService.initialPostData;)) O para un mejor rendimiento, simplemente copie initialPostData de su servicio y péguelo en el componente en su lugar:
postData: PostData = {prop1: 1, prop2: 'foo', etc...}