ДОБАВИТЬ / УДАЛИТЬ строку в P-таблице обновлений JSON - PullRequest
Новая
       8

ДОБАВИТЬ / УДАЛИТЬ строку в P-таблице обновлений JSON

0 голосов
/ 22 октября 2018

Моя таблица должна быть CRUD (создание, чтение, обновление и удаление).Все эти действия должны быть обновлены в моем JSON-файле.Чтение и обновление работает, но я не могу понять, как удалить конкретную строку в таблице.Не могу использовать Jquery или AngularJS только Angular 6. Кто-нибудь может мне помочь?

Я должен сделать это еще для 4 Массивов, подобных этой.Так что если кто-то может объяснить мне, как это работает с 1. Я думаю, что я могу справиться со всеми ими.Мой вопрос в основном касается удаления или сращивания, но если вы также знаете ответ для добавления новой пустой строки / объекта, который я могу изменить в своей 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>

1 Ответ

0 голосов
/ 30 октября 2018

Вы можете передать данные строки методу удаления 

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

, а затем удалить эту строку из массива, который таблица использует для значения на основе уникального идентификатора 

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 по индексу, что кажется неправильным.

...