Detect change in each object of an array. Typescript/Angular 2

0
votes

I have a person array which I displayed in a primeng datatable. Each object has these fields (firstName, lastName and age). Each field corresponds to a column in a table with an additional column that displays the status of each object. The status indicates if the object/row in the table has change. There are two status "Object Change/Not Change"

enter image description here

<p-dataTable [value]="persons" [editable]="true"  resizableColumns="true" reorderableColumns="true"> 
    <p-column header="Status">
      <ng-template pTemplate="body">
         <span [hidden]=true>Object Change</span>
       <span >Not Change</span>
      </ng-template>
    </p-column>
    <p-column field="firstName" header="First Name" [editable]="true"></p-column>
    <p-column field="lastName" header="Last Name" [editable]="true"></p-column>
    <p-column field="age" header="Age" [editable]="true">
      <ng-template let-col let-car="rowData" pTemplate="editor">
        <select class="form-control" [(ngModel)]="car[col.field]">
          <option [value]=12>12</option>
          <option [value]=14>14</option>
          <option [value]=23>23</option>
        </select>
      </ng-template>
    </p-column>
</p-dataTable>


<p>{{persons | json}}</p>

I set the primeng datatable column editable to true so that the user can edit the data inside the table. Now, I want to detect if each object has changed. If the object has changed I want the "status" column be set to "Object change". I want to apply this condition in each object in the array. Is there a way to detect the change for each row/object in the array.I createda plunkr for this. http://plnkr.co/edit/x8Sdgz?p=preview

2
angulartypescriptprimeng

2 Answers

0
votes

a possible solution is to replace 

[(ngModel)]="car[col.field]"

by 

[ngModel]="car[col.field]" (ngModelChange)="onCarChange($event)"

this way you can attach any logic you want

0
votes

I will detect the change on the field. If you want to intercept every change on any field you'll have to use the same pattern (ng-template) on every column in the datatable.

Kind regards