为什么对象和 html 中的值不能正确更新？

Question

我正在制作一个行程生成器，所有活动都有持续时间(以分钟为单位(，行程也有开始时间，所以当我生成行程时，我会根据活动持续时间更新小时，并在下一个活动中显示更新的小时。例如，如果行程从下午6点开始，第一个活动的时间为5分钟，则该时间将添加到小时中，并在HTML中显示类似以下内容：

• 06:00第一次活动(5分钟(
• 06:05第二次活动(2分钟(
• 06:07第三次活动(10分钟(

但是当更新时间时，它并没有将其传递给下一个活动，而是被添加到其中。例如：

• 06:05第一次活动(5分钟(
• 06:07第二次活动(2分钟(
• 06:17第三次活动(10分钟(

Mi代码：

活动接口：

export interface Activity{
activityName : string;
duration     : number;
zone         : string;
participants : Participante [];
time        ?: Date
}

程序组件：

export class ProgramComponent {
program    !: Program[]
startTime  !: Date; 
time       !: Date; //It's the time I send and receive from child

constructor( private gpService: ProgramGeneratorServices ) {
//I save the start time from Form, don't show all the interfaces 'çause I don't think it's necessary
this.startTime = this.program[0].startTime;
this.time = this.programa[0].startTime;
}
//This function is only for reset the hour to start, I do two itinerary for 2 weeks so I need restart the hour for ngFor
resetHour() {
this.time = this.startTime
}
//This function update the hour inside this program component
updateMinutes( activity?: Activity ) {
this.time = this.gpService.addMinutes( this.time, activity?.duration);
}
//This function update the hour receiving the time from a child component
updateTime( updatedTime: Date ) {
this.time = updatedTime;
}
}

程序html:

<div *ngFor="let subPrograma of programa;"
class="mb-5"> {{ resetHour() }}
<div class="my-3">
<div class="col-6 titulo_seccion ps-2">
{{ subProgram.sections[1].sectionName | uppercase }}
</div>

//Send the activity data and the time to child and returns the updated time to send to the next activity
<app-actividad
*ngFor="let activity of subProgram.sections[1].activities"
[activity]="activity"
[time]="time"
(timeChange)="updateTime($event)"
></app-actividad>
</div>
</div>

活动应用程序(子组件(：

export class ActividadComponent implements OnInit{

@Input() activity  !: Actividad;
@Input() time      !: Date;
@Output() timeChange = new EventEmitter<Date>();
constructor( private gpService: ProgramGeneratorService ) {
}
//In OnInit assign time to activity and next to update the time whit a services function
ngOnInit(): void {
this.activity.time = this.time;
this.addMinutes();
}
addMinutes(): void {
this.time = this.gpService.addMinutes( this.time, this.activity.duration);
this.timeChange.emit( this.time );
}
}

活动HTM1(儿童(

<div class="row">

<div class="col-4">
<div class="row">
<div class="col text-start">
<span> {{ time | date: 'hh:mm' }}
<span class="cr">
<span class="point">•</span>
//THIS is where I print the time
{{ activity.activityName }} 
<span *ngIf="activity.time > 0" class="ms-1">
({{ activity.time }} mins)
</span>
</span>
</span>
</div>
</div>
</div>

</div>

程序生成器服务：

export class GeneradorProgramaService {
constructor( private http: HttpClient ) { }
//This is the function that updates the time
addMinutes( currentTime: Date, mins: number = 5 ): Date {
return new Date( currentTime.getTime() + mins * 60000 );
}
}

希望有人能帮助我，我已经被困了几个小时(如果你看到一些奇怪的事情是因为我省略了我认为不必要的代码，只放了与问题相关的部分(。

Answer 1

您在HTML中使用time，并在子组件的addMinutes函数中重写time。

...
ngOnInit(): void {
this.activity.time = this.time;
this.addMinutes();
}
addMinutes(): void {
// Here, you override the time. That's why you see the weird one in the HTML.
this.time = this.gpService.addMinutes( this.time, this.activity.duration);
this.timeChange.emit( this.time );
}

addMinutes_NoOverride() {
// Store the new time in a const and then emit it.
const newTime = this.gpService.addMinutes(this.time, this.activity.duration);
this.timeChange.emit(newTime);
}