Angular中子组件向父组件传值并更新对象数组指定属性

你的核心问题是：子组件已能通过Output传值，但缺少对应属性的标识，导致父组件不知道该更新temps对象中的哪一项TempSetting。下面提供两种直接可行的解决方案：

方案1：利用Angular双向绑定（推荐） #

Angular的双向绑定遵循[(属性名)]语法，要求子组件同时提供@Input()和对应命名的@Output()（格式为属性名Change），能自动完成值的双向同步。

子组件TS修改 #

1. 替换原newItemEvent为符合双向绑定约定的valueChange：

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { MatSliderChange } from '@angular/material/slider';

@Component({
  selector: 'app-incrementer',
  templateUrl: './incrementer.component.html',
  styleUrls: ['./incrementer.component.scss'],
})
export class IncrementerComponent implements OnInit {
  decrementOff: any;
  incrementOff: any;
  public prevTempSetting: any;
  @Input('value') value: any;
  @Input('max') max: any;
  @Input('min') min: any;
  @Input('step') step: any;
  @Input('heading') heading: any;
  // 替换为双向绑定专用的Output
  @Output() valueChange = new EventEmitter<any>();

  constructor() { }

  ngOnInit() { }

  onValueChange(event: MatSliderChange) {
    this.value = event.value;
    this.emitValueChange(this.value);
  }

  // 统一触发值变更事件
  emitValueChange(value: any) {
    this.valueChange.emit(value); 
  }

  turnOnTemp() {
    this.value = this.prevTempSetting ?? 0;
    this.emitValueChange(this.value);
  }

  turnOffTemp() {
    this.prevTempSetting = this.value;
    this.value = 'OFF';
    this.emitValueChange(this.value);
    console.log(this.value);
  }

  incrementValue() {
    if (this.value <= 119) {
      this.value += 1;
      this.emitValueChange(this.value);
    }
  }

  decrementValue() {
    if (this.value >= -19) {
      this.value -= 1;
      this.emitValueChange(this.value);
    }
  }
}

父组件HTML修改 #

所有组件使用双向绑定语法，无需额外绑定newItemEvent：

<app-incrementer [(value)]="temps?.NoseTemperature.TempSetting" [heading]="'NOSE'">
</app-incrementer>
<app-incrementer [(value)]="temps?.MiddleTemperature.TempSetting" [heading]="'MIDDLE'">
</app-incrementer>
<app-incrementer [(value)]="temps?.TailTemperature.TempSetting" [heading]="'TAIL'">
</app-incrementer>

此时父组件的temps对象会自动同步子组件修改后的值，无需额外编写addItem方法。

方案2：传递属性标识（适合需额外逻辑处理的场景） #

如果父组件需要基于修改的属性做额外操作，可以让子组件传递包含属性标识和新值的对象，明确告诉父组件要更新哪一项。

子组件TS修改 #

1. 添加接收属性标识的@Input()：

@Input() tempKey: string; // 接收如"NoseTemperature"这类标识

2. 修改事件触发逻辑，传递包含标识和值的对象：

emitValueChange(value: any) {
  this.newItemEvent.emit({ key: this.tempKey, value }); 
}

父组件修改 #

1. HTML中传入属性标识：

<app-incrementer [value]="temps?.NoseTemperature.TempSetting" [tempKey]="'NoseTemperature'" [heading]="'NOSE'" (newItemEvent)="updateTemp($event)">
</app-incrementer>
<app-incrementer [value]="temps?.MiddleTemperature.TempSetting" [tempKey]="'MiddleTemperature'" [heading]="'MIDDLE'" (newItemEvent)="updateTemp($event)">
</app-incrementer>
<app-incrementer [value]="temps?.TailTemperature.TempSetting" [tempKey]="'TailTemperature'" [heading]="'TAIL'" (newItemEvent)="updateTemp($event)">
</app-incrementer>

2. 父组件TS实现更新逻辑：

updateTemp(data: { key: string; value: any }) {
  if (this.temps?.[data.key]) {
    this.temps[data.key].TempSetting = data.value;
    // 若temps是不可变对象，需重新赋值触发变更检测：
    // this.temps = { ...this.temps };
  }
}

补充说明 #

• 你的temps是对象而非数组（结构为{ NoseTemperature: {}, ... }），若后续改为数组，只需传递索引或唯一标识即可复用上述逻辑。
• 确保所有修改this.value的场景都触发事件，否则父组件无法同步更新。

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