数组推送正在覆盖之前推送的数据答案

【问题标题】：Array push is overwriting previously pushed data数组推送正在覆盖之前推送的数据
【发布时间】：2020-03-24 12:27:00
【问题描述】：

我正在尝试使用 Angular 8 构建示例餐厅应用程序。我正在使用 @Input() 将单个餐厅数据作为对象从父组件传递到 RestaurantCardComponent 进行显示。 RestaurantCardComponent 中的每张卡片都有一个“添加到收藏夹”按钮，该按钮应将特定餐厅推入 User 模型类中的收藏夹数组中。但是，当我尝试推送对象时，第一个对象被推送而没有任何问题，但随后单击“添加到收藏夹”只会替换先前推送的对象。下面是 CardViewComponent 的 HTML 代码。

<app-restaurant-card [restaurant]="collection" *ngFor="let collection of collections"></app-restaurant-card>

这里是 RestaurantCardComponent 的打字稿代码：

import { Component, OnInit, Input } from '@angular/core';
import { faHeart } from '@fortawesome/free-solid-svg-icons';
import { AuthServiceService } from '../services/auth-service.service';
import { User } from '../user';
import { RouterService } from '../services/router.service';
import { Restaurant } from '../restaurant';

@Component({
  selector: 'app-restaurant-card',
  templateUrl: './restaurant-card.component.html',
  styleUrls: ['./restaurant-card.component.css']
})
export class RestaurantCardComponent implements OnInit {
  @Input() restaurant: Restaurant;
  faHeart = faHeart;
  user: User = new User();

  constructor(private authService: AuthServiceService, private routerService: RouterService) { }

  ngOnInit() {
    // console.log(this.restaurant);
    this.authService.getUserData(parseInt(this.authService.getBearerToken())).subscribe(
      data => this.user = data,
      error => console.log(error.message));
  }

  addToFavourites() {

    this.user.favourites.push(this.restaurant);
    this.authService.updateUserData(this.user).subscribe(
      updatedData => console.log(updatedData),
      error => console.log(error.message)
    );

  }

}

如何在不替换之前推送的数组的情况下将餐厅添加到收藏夹数组？

【问题讨论】：

您在组件的每个实例中创建一个新用户。我认为您应该将 user 字段设为 Input() 并从父组件传递它，这样用户对于每张卡都是通用的
你的updateUserData-方法是什么样的？
我同意@SebastianKaczmarek。如果您有 100 家餐厅，您将向后端发送 100 个请求以获取每个组件的用户信息。而且我认为它可以解决您的问题，因为您将拥有 1 个用户实例，并且在子组件上您将使用用户对象的引用
考虑查看表示和容器组件模式（也称为智能组件和哑组件）。您可能希望拥有一个存储收藏夹的用户服务。

标签： javascript arrays angular javascript-objects angular8

【解决方案1】：

创建一个名为 UserService 的新服务，或者将属性“user”添加到 AuthService 而不是组件，如果您将用户添加到组件，您将为每个组件都有一个实例。

【讨论】：