Angular/Typescript Change values of a number array

Question

I get the Object essensplan

  const essensplan = [
 { id: 1, essenProWoche: [11, 14, 17, 20, 12] },
 ...
 { id: 8, essenProWoche: [15, 14, 13, 12, 11] }
  ];

from an emulated server and I want the possibility for the user to change each value of the array essenProWoche and give it back to the server.

I tried

    <div>
     <label>Änderungen:
        <input [(ngModel)]="essensplan.essenProWoche"     placeholder="Name">
     </label>
    </div>

which doesn't work because it's not returned as an array

and

 <label *ngFor="let id of essensplan.essenProWoche; let i = index">
    <input type="number"  [(ngModel)]="essensplan.essenProWoche[i]">
  </label>

which changes the values live in the browser, but they are not saved.

I save the inputs by 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'))

As you are saying: I get the Object essensplan, it should be const essensplan ={ id: 1, essenProWoche: [11, 14, 17, 20, 12] }; — Rohit Sharma
– Rohit Sharma, Commented Sep 13, 2018 at 17:19
Why don't you use pick the input as a comma seperated values ? — CruelEngine
– CruelEngine, Commented Sep 13, 2018 at 17:19
@RohitSharma it is like that, there are following more with id:2, 3 and so on — anecsa
– anecsa, Commented Sep 13, 2018 at 17:24

Rohit Sharma · Accepted Answer · 2018-09-13 17:34:09Z

1

Another way, you can make the array elements as a string. When you get an array of few objects from server:

this.essensplan = [
    { id: 1, essenProWoche: [11, 14, 17, 20, 12] },
    { id: 2, essenProWoche: [11, 14, 17, 20, 12] }
];

Then you can change it as:

this.essensplan.map(item => {
    item.essenProWoche = item.essenProWoche.join(',');
});

And you can use:

<ng-template ngFor let-item [ngForOf]="essensplan">
    <input type="text" [(ngModel)]="item.essenProWoche">
</ngtemplate>
<!-- but make sure to enter the values with commas -->

And when you are about to save it:

save(): void {
    this.essensplan.map(item => {
        item.essenProWoche = item.essenProWoche.split(',');    // because it was a string
    });
    this.essensplanService.updateEssensplan(this.essensplan)
    .subscribe(() => this.goBack());
}

edited Sep 13, 2018 at 17:34

answered Sep 13, 2018 at 17:26

Rohit Sharma

3,3442 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

anecsa Over a year ago

thank you this looks like it will work, but what is the import for the .map()?

Rohit Sharma Over a year ago

No need to import the map its available in Array.prototype by default.

anecsa Over a year ago

this.essensplan.map wants to map the essensplan object and not the EssenProWoche array

Rohit Sharma Over a year ago

As you can see above this.essensplan = [ ]. Its also an array.

Sachin Gupta · Accepted Answer · 2018-09-13 17:25:39Z

0

Are you trying to call the save function automatically on change of each value? If yes, then use a formControl and subscribe to the valueChanges event. you can call your save function everytime the value changes.

answered Sep 13, 2018 at 17:25

Sachin Gupta

5,3493 gold badges19 silver badges33 bronze badges

Comments

Shashikant Devani · Accepted Answer · 2018-09-13 19:15:21Z

0

Do you want two-way binding functionality?

If you change value inside model than automatically update your json too.

In Your html :

<div *ngFor="let items of essensplan">
    <div *ngFor="let opt of items.essenProWoche; index as i; trackBy: trackByFn">       
        <input type="number" [(ngModel)]="items.essenProWoche[i]">
    </div>
</div>

In Your Ts :

trackByFn(index, item) {
   return index;
}

For Live demo check this Stackblitz

answered Sep 13, 2018 at 19:15

Shashikant Devani

2,4641 gold badge15 silver badges29 bronze badges

3 Comments

anecsa Over a year ago

thanks, this works in browser! only problem is that it's not saved to the server, do you know how i can add that?

anecsa Over a year ago

console gives no error, i think because the json is updated in the browser. It's just not saved to the server

Shashikant Devani Over a year ago

Did you get updated json inside this method : updateEssensplan(essensplan: Essensplan): Observable<any> { in your service?

Collectives™ on Stack Overflow

Angular/Typescript Change values of a number array

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related