My task involves implementing CRUD (Create, Read, Update, Delete) functionality for my table. While Create, Read, and Update are working fine with the JSON file, I am struggling to figure out how to delete a specific row in the table without using JQuery or AngularJS but only Angular 6. Can anyone provide guidance on this issue?
I need to replicate this process for 4 more arrays similar to this one. If someone can explain the deletion process with one array, I believe I will be able to handle all of them. My primary concern is regarding the delete operation using splice, and if you also have insights on adding a new empty line/object that can be altered within the p-table using editable columns, it would be greatly appreciated.
JSON:
Partijen = [
{
"Adressen": [{
"iAdresID" : "118",
"iID" : "74",
"sType" : "Partij",
"sSoort" : "BezoekAdres",
"iWijkCode" : "3356",
"sSraatCode" : "ME",
"iHuisNr" : "4",
"sToev" : "",
"sStraat" : "Boerenschouw",
"sPlaats" : "PAPENDRECHT",
"sGemeente" : "PAPENDRECHT",
"rLatitudeX" : "51,83249",
"rlongitudeY" : "4,71396",
"sAdres" : "Boerenschouw 4, 3356ME PAPENDRECHT"
},
{
"iAdresID" : "119",
"iID" : "74",
"sType" : "Partij",
"sSoort" : "PostAdres",
"iWijkCode" : "3356",
"sSraatCode" : "ME",
"iHuisNr" : "4",
"sToev" : "",
"sStraat" : "Boerenschouw",
"sPlaats" : "PAPENDRECHT",
"sGemeente" : "PAPENDRECHT",
"rLatitudeX" : "51,83249",
"rlongitudeY" : "4,713613",
"sAdres" : "Boerenschouw 4, 3356ME PAPENDRECHT"
}
]
}
]
Part of P-table
<p-tabPanel header="Adressen" leftIcon="pi pi-home">
<p-table [value]="Partijen" [(selection)]="Adressen">
<ng-template pTemplate="header">
<tr>
<th>Soort</th>
<th>Straatnaam</th>
<th>Huisnummer</th>
<th>Wijkcode</th>
<th>Straatcode</th>
<th>Plaats</th>
<th>Verwijderen</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-Partij>
<tr>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="Partij.Adressen[0].sSoort">
</ng-template>
<ng-template pTemplate="output">
{{Partij.Adressen[0].sSoort}}
</ng-template>
</p-cellEditor>
</td>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="Partij.Adressen[0].sStraat">
</ng-template>
<ng-template pTemplate="output">
{{Partij.Adressen[0].sStraat}}
</ng-template>
</p-cellEditor>
</td>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="Partij.Adressen[0].iHuisNr">
</ng-template>
<ng-template pTemplate="output">
{{Partij.Adressen[0].iHuisNr}}
</ng-template>
</p-cellEditor>
</td>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="Partij.Adressen[0].iWijkCode">
</ng-template>
<ng-template pTemplate="output">
{{Partij.Adressen[0].iWijkCode}}
</ng-template>
</p-cellEditor>
</td>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="Partij.Adressen[0].sSraatCode">
</ng-template>
<ng-template pTemplate="output">
{{Partij.Adressen[0].sSraatCode}}
</ng-template>
</p-cellEditor>
</td>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="Partij.Adressen[0].sPlaats">
</ng-template>
<ng-template pTemplate="output">
{{Partij.Adressen[0].sPlaats}}
</ng-template>
</p-cellEditor>
</td>
<td>
<button pButton type="button" label="Verwijder" class="buttonCSS" (click)="on_Verwijderen()"></button>
</td>
</tr>
</ng-template>
</p-table>
</p-tabPanel>
</p-tabView>