Angular - Когда я нажимаю на компонент, все экземпляры этого компонента повторно инициализируются

Question

Есть страница карточек проектов. У каждой карты есть любимая кнопка. Если проекта нет в избранном, он станет избранным при нажатии кнопки. В карточке проекта есть значок, который меняется в зависимости от того, является ли проект избранным или нет.

Проблема в том, что когда я нажимаю кнопку «Избранное», все компоненты карточки проекта повторно инициализируются, а значок избранного - нет. т изменить. Следующий код поможет в большей степени.

project-carousel.component. html

<app-project-card *ngFor="let project of projects" [project]="project" [isFavorite]="isFavorite(project.id)"></app-project-card>

project-card.component. html

<div class="project-fav-btn" (click)="favorite()">
     <i [ngClass]="{'fas':isFavorite, 'far':!isFavorite}" class="fa-heart"></i>
</div>

project -card.component.ts

export class ProjectCardComponent implements OnInit {

  @Input() project: Proje;
  @Input() isFavorite: boolean;

  constructor(private favoriteService: FavoriteService) {
  }

  ngOnInit(): void {
  }
  
  favorite(): void {
    if (this.isFavorite) {
      this.favoriteService.deleteFavorite(this.project.id);
    } else {
      this.favoriteService.addFavorite(this.project.id);
    }
    this.isFavorite = !this.isFavorite;
  }
}

Итак, я хочу сделать следующее; Когда я нажимаю кнопку избранного, я хочу добавить этот проект в избранное и изменить значок избранного. Жду ваших предложений по решению или иному подходу.

Answer 1

Попробуйте использовать trackBy с вашим ngfor. это, вероятно, решит такие проблемы, с которыми вы сталкиваетесь.

проверьте angular выполните c для реализации https://angular.io/api/common/NgForOf

или попробуйте следующий код,

<app-project-card *ngFor="let project of projects; trackBy:trackByProjectId" [project]="project" [isFavorite]="isFavorite(project.id)" ></app-project-card>

в component.ts

trackByProjectId(index: number, project: any): string {  
    return project.id;  // need to return unique key from your project , you can adjust this one 

  }