In my table, I display the Article Number and Description of werbedata. After populating all the data in the table, I want to add a new article and description. When I click on 'add', that row should remain unchanged with blank fields added below it. Currently, when I add a new row, it disappears and only blank fields are generated again. Here is my code:
HTML :
<md-card class="default-card">
<h1>{{ 'Edit Details' }}</h1>
</md-card>
<div class="flex">
<md-card class="werbedata-details">
<div *ngIf="werbedata">
<md-input-container>
<input mdInput placeholder="{{ 'Werbe Nummer' }}" [(ngModel)]="werbedata.WERBE_NR" name="WERBENR" disabled type="text">
</md-input-container>
<md-input-container>
<input mdInput placeholder="{{ 'Produkt Name (Werbe Name)' }}" [(ngModel)]="werbedata.Produktbez" name="Produkt Name">
</md-input-container>
<md-input-container>
<input mdInput placeholder="{{ 'Werbetext' }}" [(ngModel)]="werbedata.Werbetext" name="Werbetext">
</md-input-container>
<md-input-container>
<input mdInput placeholder="{{ 'Produkt Bezeichnung' }}" [(ngModel)]="werbedata.Produktbez" name="Bezeichnung">
</md-input-container>
<md-input-container>
<input mdInput placeholder="{{ 'VK-Einheit' }}" [(ngModel)]="werbedata.MGEHT" name="MGEHT">
</md-input-container>
</div>
</md-card>
<md-card class="werbenumber-list">
<md-card-content>
<table>
<thead>
<th> Artikle </th>
<th> Description </th>
</thead>
<tbody>
<tr *ngFor="let product of this.products">
<td>{{ product.ARTNR }}</td>
<td>{{ product.PRODUKTBEZ }}</td>
</tr>
<tr>
<td>
<input class="form-control" type="text" id="newValuesARTNR" [(ngModel)]="newValues.ARTNR" name="newValuesARTNR" />
</td>
<td>
<button class="btn btn-default" type="button" (click)="addFieldValue(newValues.ARTNR)">Add</button>
</td>
</tr>
</tbody>
</table>
</md-card-content>
</md-card>
<div class="endbuttons" align="end">
<button md-raised-button (click)="goBack()">
{{ 'cancel' }}
<md-icon>cancel</md-icon>
</button>
<button md-raised-button color="primary" (click)="editWerbedata(werbedata)">
{{ 'save' }}
<md-icon>save</md-icon>
</button>
</div>
</div>
EditDetailsPage.ts
getWerbeData(filialewerbenr) {
this.werbedataService.getWerbeData(filialewerbenr)
.then(
werbedata => {
this.werbedata = werbedata[0];
let artns = this.werbedata.ArtNr.split(' ');
this.anums = artns;
for (let a of artns) {
this.getProduktData(this.werbedata.FILIALE + a);
}
},
error => this.errorMessage = <any>error
);
}
// More functions...
What I am trying to do is edit all the details of Werbedata. Can someone please guide me on how to add newly added rows with articles and descriptions to my "update werbedata" method?
MyJsonObject :
0:
Aktiv_Log:""
Aktiv_Log_leer:""
ArtNr:"3323 3319 3322 3331 3309 3317 3316 3329 3330 3332 3324"
ArtNr_01:"3323"
ArtNr_01_Name:"Schoko-Krokant 2 kg"
ArtNr_01_PRZ:""
ArtNr_01_S:"H3323"
ArtNr_02:"3319"
ArtNr_02_Name:"Schoko 2 kg"
ArtNr_02_PRZ:""
ArtNr_02_S:"H3319"
and so on...
If anyone can provide input on how to achieve this, it would be highly appreciated.