Question

我的表必须是CRUD（创建，读取，更新和删除）。所有这些操作都必须在我的JSON文件中进行更新。读取和更新有效，但我似乎无法弄清楚如何删除表中的特定行。不能仅使用Angular 6的Jquery或AngularJS。有人可以帮助我吗？

我必须对另外4个这样的数组执行此操作。因此，如果有人可以向我解释它如何与1.配合使用，我想我可以解决所有问题。我的问题主要是关于删除或拼接，但是如果您也知道添加新的空行/对象的答案，我可以使用Editable列在p表中更改它，那就更好了。

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"
        }
      ]
    }
  ]

P表的一部分

<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>

Answer 1

您可以将行数据传递给delete方法

<p-column> 
    <ng-template pTemplate="body" let-row="rowData">
         <button pButton type="button" label="Verwijder" class="buttonCSS" (click)="on_Verwijderen(row)"></button>
    </ng-template>
</p-column>

然后从表所使用的数组中删除该行，以获取基于唯一ID的值

on_Verwijderen(row: any){
            this.Partijen.Adressen.splice(this.Partijen.Adressen.findIndex((r) => (r.iAdresID === row.iAdresID)), 1);
    }

这就是我在使用p列时所做的事情，看起来您已经有了一个包含行数据的Partij变量，所以也许您可以拥有

<button pButton type="button" label="Verwijder" class="buttonCSS" (click)="on_Verwijderen(Partij)"></button>

尽管我对您的表设置有些困惑，但是您似乎正在按索引显式访问Adressen数组，这似乎不正确。

P表中的添加/删除行会更新JSON

1 个答案: