Angular中Getter和Setter无法正常工作的问题求助

问题根源 #

你的子组件Setter逻辑存在两个关键问题：

1. 操作顺序错误：先修改了旧的_game对象的rolls[0]，紧接着将_game替换为传入的新game对象，导致之前的修改完全被覆盖，没有任何实际效果。
2. 违反单向数据流原则：即使你正确修改了传入的game对象，直接在子组件中修改父组件传递的输入属性对象，虽然在引用类型下会同步到父组件，但这不符合Angular的单向数据流规范，容易引发不可预测的状态问题。

修复方案 #

方案1：修正Setter逻辑（临时应急，不推荐长期使用） #

调整Setter操作顺序，直接修改传入的game对象（因引用类型特性，父组件对象会同步变化）：

@Input()
get game(): BowlingGame { return this._game; }
set game(game: BowlingGame) {
  // 先修改传入的game对象，再赋值给内部变量
  if (game.rolls.length > 0) {
    game.rolls[0] = game.rolls[0] + 15;
  }
  this._game = game;
}
private _game = { rolls: <number[]>[], player: "", isActive: true };

方案2：遵循单向数据流规范（推荐） #

Angular要求子组件通过@Output事件通知父组件修改数据，保持数据流单向性：

1. 子组件代码修改

import { Component, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
import { BowlingGame } from '../model/bowling-game.model';

@Component({
  selector: 'app-generate-result',
  templateUrl: './generate-result.component.html',
  styleUrls: ['./generate-result.component.css']
})
export class GenerateResultComponent {
  @Input() game: BowlingGame;
  @Output() gameUpdated = new EventEmitter<BowlingGame>();

  ngOnChanges(changes: SimpleChanges) {
    if (changes['game'] && changes['game'].currentValue) {
      // 深拷贝对象和数组，避免修改原引用
      const updatedGame = { ...this.game };
      updatedGame.rolls = [...this.game.rolls];
      
      if (updatedGame.rolls.length > 0) {
        updatedGame.rolls[0] = updatedGame.rolls[0] + 15;
      }
      this.gameUpdated.emit(updatedGame);
    }
  }
}

2. 父组件模板修改

<app-generate-result 
  *ngIf="bowlingGamePlayer1" 
  [game]="bowlingGamePlayer1"
  (gameUpdated)="updateBowlingGamePlayer1($event)"
></app-generate-result>

3. 父组件TS添加处理方法

updateBowlingGamePlayer1(updatedGame: BowlingGame) {
  this.bowlingGamePlayer1 = updatedGame;
}

关于之前功能正常的原因 #

此前功能正常，大概率是因为你直接在子组件中修改了输入属性的引用类型属性，未使用Setter拦截，此时父组件的对象会因引用关系同步变化。引入Setter后，错误的操作顺序导致修改被覆盖，因此父组件看不到变化。

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