Angular 5中数组按引用传递问题：批量重置帖子点赞数无效

让我来帮你搞定这个视图更新的问题，先梳理下问题根源和可行的解决方案：

首先修正代码中的明显错误 #

你在PostListComponent里的输入属性定义有误！父组件传递的是帖子数组，但你把posts的类型写成了单个Post对象，这会导致数据传递异常，先把这个修正：

export class PostListComponent implements OnInit {
  @Input() posts: Post[]; // 这里改为Post[]类型
  constructor(private postService: PostService) { }
}

核心问题：Angular变更检测的机制 #

Angular默认的变更检测会监听引用类型的引用变化，而非对象内部属性的变化。你在setLoveItsToDefault里只是修改了数组中每个post对象的loveIts属性，但posts数组本身的引用没有改变，所以Angular可能不会自动触发视图更新。

下面是几种实用的解决方案：

方案1：修改数组引用，主动触发变更检测 #

在PostService的setLoveItsToDefault方法中，修改完所有post的属性后，通过创建数组副本改变引用：

setLoveItsToDefault() {
  for (let post of this.posts) { 
    post.loveIts = 0; 
  }
  // 重新赋值数组，改变引用，触发Angular变更检测
  this.posts = [...this.posts];
}

这种方式简单直接，数组引用变化后，Angular会自动检测到并更新视图。

方案2：使用ChangeDetectorRef手动触发变更检测 #

如果不想改变数组引用，可以在组件中注入ChangeDetectorRef，手动通知Angular进行变更检测。比如在AppComponent中：

import { ChangeDetectorRef } from '@angular/core';

export class AppComponent {
  @Input() posts : Post[];
  constructor(
    private postService: PostService,
    private cdr: ChangeDetectorRef // 注入ChangeDetectorRef
  ) { }
  ngOnInit() { this.posts = this.postService.getPosts(); }
  onInitializeLoves() {
    if (confirm('Are you sure to initialize all loves of all posts to 0 ?')) {
      this.postService.setLoveItsToDefault();
      this.cdr.detectChanges(); // 手动触发变更检测
    } else { return; }
  }
}

方案3：采用不可变数据模式（推荐复杂场景） #

你可以在修改时创建新的post对象和数组，完全改变引用，这种方式符合不可变数据的设计理念，避免副作用：

setLoveItsToDefault() {
  this.posts = this.posts.map(post => ({
    ...post,
    loveIts: 0
  }));
}

这种方式不仅能触发视图更新，还能让数据变化更可追踪，适合复杂的组件场景。

先修正PostListComponent的类型错误，再选择上面任意一种方案，就能解决视图不更新的问题了。

内容的提问来源于stack exchange，提问作者Gothiquo