When fetching data from a simulated server, I receive the Object essensplan. The goal is to allow users to modify each value in the essenProWoche array and send it back to the server.
I attempted:
<div>
<label>Changes:
<input [(ngModel)]="essensplan.essenProWoche" placeholder="Name">
</label>
</div>
However, this approach doesn't work because it doesn't return an array.
Alternatively, I tried:
<label *ngFor="let id of essensplan.essenProWoche; let i = index">
<input type="number" [(ngModel)]="essensplan.essenProWoche[i]">
</label>
This method allows for real-time changes in the browser but does not save the values permanently.
To save the inputs, I utilize the following functions:
essensplan-detail.component.ts
save(): void {
this.essensplanService.updateEssensplan(this.essensplan)
.subscribe(() => this.goBack());
}
essensplan.service.ts
updateEssensplan(essensplan: Essensplan): Observable<any> {
return this.http.put(this.speisekarteUrl, essensplan, httpOptions).pipe(
tap(_ => this.log(`updated essensplan id=${essensplan.id}`)),
catchError(this.handleError<any>('updateEssensplan'))
}