[Solved] Angular 5 -> Inputfield from Arrayentry

by


Okay, reviewing your HTML-template I’d suggest the following solution:

  1. extend your nagelpaletten-model by adding the field bestellmenge or just menge. e.g.

    export class nagelpaletten {
    constructor(
     bestellmenge: number,
     PKArtikelID: string,
     laenge: number,
     Gewicht: number,  
     ME: number,
     Preis: number
    ) {}
}

Maybe your model is structured a little differently but mine is just supposed to give you a hint.

  1. rework your HTML-template by binding the field ‘bestellmenge’ via [(ngModel)] to your input element:

    <table class="table">
  <tr class="" *ngFor="let n of nagelplatten; let in = index; index as i; odd as isOdd; even as isEven" 
     [ngClass]="{ odd: isOdd, even: isEven }" >
     <div class="row">
        <div class="artWidth col-lg-2 col-xl-2">
          <span>
            <input [(ngModel)]="n.bestellmenge" type="number" pattern="[0-9]" name="name" (change)="addToCart(name.value, in, n.PKArtikelID, '12N')" #name>
            <div *ngIf="n.ME > 1;then karton else stueck"></div>
          </span>
          <ng-template #karton> Karton</ng-template>
          <ng-template #stueck> Stück</ng-template>
       </div>
       <div class="artikel col-lg-2 col-xl-2">{{ n.PKArtikelID }}</div>
       <div class="artikel col-lg-1 col-xl-2">{{ n.Breite }} x {{ n.Laenge }} mm</div>
       <div class="artikel col-lg-2 col-xl-2 text-right">{{ n.Gewicht | number: '1.4-4' }}</div>
       <div class="artikel col-lg-2 col-xl-2 text-right">{{ n.ME }}</div>
       <div class="artikel col-lg-2 col-xl-2 text-right">{{ n.Preis | number: '1.4-4'}}</div>  
    </div>

As long as you do not reload the whole nagelpaletten-object from server(!), you will now have each Menge that has been entered directly stored in your nagelpaletten-object. Now it should be possible to visit the shopping basket and return without losing the entered values.

Attention, maybe now you have to care for removing those bestellmenge-values afterwards!

To solve your problem another way you were forced to create something like a wrapper object. That’s more complicated and rather unnecessary.

Hope this helps.

solved Angular 5 -> Inputfield from Arrayentry