如何从 Child --> Parent 传递值并设置到对象数组中特定对象的属性中？

Question

我试图创建一个递增并传递一个用户可以递增或递减的值。我已经创建了子组件并将值传递给它。我可以在子组件中更改它等，但不确定如何传递值并确保它被设置回对象数组中的确切对象。我甚至可以使用输出将值返回给父节点。我只是不确定使用下面的代码将其设置回传入的相同属性。如果这是一个显而易见的答案，我很抱歉。

这是我的数组:

[
"NoseTemperature": {
"TrailerNumber": 4550,
"LoadNumber": 90878888,
"RefrUnitNumber": 1,
"TempSetting": 70,
"PlanFlag": false,
"EmployeeNumber": 999999,
"SetDT": "2022-06-20T05:02:44.727"
},
"MiddleTemperature": {
"TrailerNumber": 4550,
"LoadNumber": 87654321,
"RefrUnitNumber": 2,
"TempSetting": 31,
"PlanFlag": false,
"EmployeeNumber": 999999,
"SetDT": "2022-06-20T05:02:45.23"
},
"TailTemperature": {
"TrailerNumber": 4550,
"LoadNumber": 8787654,
"RefrUnitNumber": 3,
"TempSetting": "OFF",
"PlanFlag": false,
"EmployeeNumber": 9999999,
"SetDT": "2022-06-20T05:02:45.627"
}
]

父组件html:

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

子组件TS

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() newItemEvent = new EventEmitter<any>();
constructor() { }

ngOnInit() {
}

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

addNewItem(value) {
this.newItemEvent.emit(value); 
}

turnOnTemp() {

if (this.prevTempSetting) {
this.value = this.prevTempSetting
}
else { this.value = 0 };
}
turnOffTemp() {
this.prevTempSetting = this.value;
this.value = 'OFF';
console.log(this.value)
}


incrementValue() {
if (this.value > 119) { return } else {
this.value = this.value + 1
this.addNewItem(this.value);
}
}
decrementValue() {
if (this.value < -19) { return } else {
this.value = this.value - 1
this.addNewItem(this.value);
}
}

}

Answer 1

你想实现双向绑定:https://angular.io/guide/two-way-binding

添加事件发射器并在必要时发出新值。

注意，发射器的名称必须是输入变量的名称，后缀为Change。

@Input() value: any;
@Output() valueChange = new EventEmitter<any>();
incrementValue() {
this.valueChange.emit(++this.value); // emit whenever the value changes
}

然后使用香蕉盒表示法在两个方向上绑定变量。

<app-incrementer [(value)]="temps?.NoseTemperature.TempSetting"></app-incrementer>

Stackblitz: https://stackblitz.com/edit/angular-ivy-zq74mt?file=src/app/increment/increment.component.ts