Karthik Kumar

Karthik Kumar

  • NA
  • 182
  • 21.3k

update and add new row is not working in angular 4

Nov 19 2017 2:35 AM
I am trying crud operation in client side without using any database using inline editing in Angular 4.i am able to bind the values but while updating, values updated but saving as a new value, rest of the table values are not showing. Add new function also not working in my code
 
1.update is not working
 
2.addin a new row is not working
 
my html
  1. <table class="table table-striped table-bordered" cellspacing="0">  
  2. <thead class="table-inverse">  
  3. <tr>  
  4. <th>EWID</th>  
  5. <th>MMID</th>  
  6. <th>PNO12</th>  
  7. <th>PWeight</th>  
  8. <th>SegmentCO2</th>  
  9. <th>CreatedBy</th>  
  10. <th>CreatedOn</th>  
  11. <th>UpdatedBy</th>  
  12. <th>UpdatedOn</th>  
  13. <th>Actions</th>  
  14. </tr>  
  15. <tr *ngFor="let movie of preview let i=index">  
  16. <td>  
  17. <span *ngIf="!movie.showEdit">{{movie.EwId}}</span>  
  18. <input type="text" [(ngModel)]="movie.EwId" *ngIf="movie.showEdit" style="width: 112px" class="form-control">  
  19. </td>  
  20. <td>  
  21. <span *ngIf="!movie.showEdit"> {{movie.MMID}} </span>  
  22. <input type="text" [(ngModel)]="movie.MMID" *ngIf="movie.showEdit" style="width: 112px" class="form-control">  
  23. </td>  
  24. <td>  
  25. <span *ngIf="!movie.showEdit"> {{movie.PNO12}}</span>  
  26. <input type="text" [(ngModel)]="movie.PNO12" *ngIf="movie.showEdit" style="width: 112px" class="form-control">  
  27. </td>  
  28. <td>  
  29. <div class="hideextra" style="width:75px">  
  30. <span *ngIf="!movie.showEdit"> {{movie.PWeight}} </span>  
  31. <input type="text" [(ngModel)]="PWeight" *ngIf="movie.showEdit" style="width: 112px" class="form-control">  
  32. </div>  
  33. </td>  
  34. <td>  
  35. <div class="hideextra">  
  36. <span *ngIf="!movie.showEdit"> {{movie.SegmentCo2}} </span>  
  37. <input type="text" [(ngModel)]="movie.SegmentCo2" *ngIf="movie.showEdit" style="width: 112px" class="form-control">  
  38. </div>  
  39. </td>  
  40. <td class="medium-columnwidth">  
  41. <div class="hideextra table-width">  
  42. <span *ngIf="!movie.showEdit"> {{movie.CreatedBy}} </span>  
  43. <input type="text" [(ngModel)]="movie.CreatedBy" *ngIf="movie.showEdit" style="width: 112px" class="form-control">  
  44. </div>  
  45. </td>  
  46. <td class="medium-columnwidth">  
  47. <div class="hideextra table-width">  
  48. <span *ngIf="!movie.showEdit"> {{movie.CreatedOn}} </span>  
  49. <input type="text" [(ngModel)]="movie.CreatedOn" *ngIf="movie.showEdit" style="width: 112px" class="form-control">  
  50. </div>  
  51. </td>  
  52. <td class="medium-columnwidth">  
  53. <div class="hideextra table-width">  
  54. <span *ngIf="!movie.showEdit"> {{movie.UpdatedBy}} </span>  
  55. <input type="text" [(ngModel)]="movie.UpdatedBy" *ngIf="movie.showEdit" style="width: 112px" class="form-control">  
  56. </div>  
  57. </td>  
  58. <td class="medium-columnwidth">  
  59. <div class="hideextra table-width">  
  60. <span *ngIf="!movie.showEdit"> {{movie.UpdatedOn}} </span>  
  61. <input type="text" [(ngModel)]="movie.UpdatedOn" *ngIf="movie.showEdit" style="width: 112px" class="form-control">  
  62. </div>  
  63. </td>  
  64. <td>  
  65. <a href="javascript:void(0)"  
  66. (click)="deletecsv(i)" *ngIf="!movie.cancel"  
  67. class="btn btn-danger btn-xs pull-right">Delete</a>  
  68. <a href="javascript:void(0)" *ngIf="movie.showupdate"  
  69. (click)="update(movie)"  
  70. class="btn btn-primary btn-xs pull-right">Update</a>  
  71. <a href="javascript:void(0)" *ngIf="movie.showsave"  
  72. (click)="addcsv(csvsingle)"  
  73. class="btn btn-primary btn-xs pull-right">Save</a>  
  74. <a href="javascript:void(0)" *ngIf="!movie.showEdit"  
  75. (click)="editcsv(movie)"  
  76. class="btn btn-primary btn-xs pull-right">Edit</a>  
  77. <a href="javascript:void(0)" *ngIf="movie.cancel"  
  78. (click)="cancel(movie)"  
  79. class="btn btn-primary btn-xs pull-right">Cancel</a>  
  80. </td>  
  81. </tr>  
  82. </thead>  
  83. </table>  
  84. </div>  
  85. </div>  
  86. </div>  
  87. <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">  
  88. <button (click)="newcsv()">Add</button>//add a new row  
  89. </div>  
component.ts
  1. public preview: Csvdata[];  
  2. public updatepreview: Csvdata;  
  3. private csvsingle: Csvdata = new Csvdata();  
  4. update(movie: Csvdata)  
  5. {  
  6. this.preview = []  
  7. var obj = new Csvdata();  
  8. obj.EwId = movie.EwId  
  9. obj.MMID = movie.MMID  
  10. obj.PNO12 = movie.PNO12  
  11. obj.PWeight = movie.PWeight  
  12. obj.SegmentCo2 = movie.SegmentCo2  
  13. obj.CreatedBy = movie.CreatedBy;  
  14. obj.CreatedOn = movie.CreatedOn;  
  15. obj.UpdatedBy = movie.UpdatedBy;  
  16. obj.UpdatedOn = movie.UpdatedOn;  
  17. this.preview.push(obj)  
  18. }  
  19. cancel(movie: Csvdata) {  
  20. movie.showEdit = false;  
  21. movie.cancel = false;  
  22. movie.showupdate = false;  
  23. }  
  24. editcsv(i: Csvdata)  
  25. {  
  26. this.edited = true;  
  27. this.saveD = false;  
  28. i.showupdate = true;  
  29. i.cancel = true;  
  30. i.showEdit = i.showEdit ? false : true;  
  31. this.updatepreview=i  
  32. this.EwId = i.EwId  
  33. this.MMID = i.MMID  
  34. this.PNO12 = i.PNO12  
  35. this.PWeight = i.PWeight  
  36. this.SegmentCo2 = i.SegmentCo2  
  37. this.CreatedBy = i.CreatedBy  
  38. this.CreatedOn = i.CreatedOn  
  39. this.UpdatedBy = i.UpdatedBy  
  40. this.UpdatedOn = i.UpdatedOn  
  41. this.showSave = true;  
  42. this.show = false;  
  43. }  
  44. newcsv()//add a new row  
  45. {  
  46. this.showSave = true;  
  47. this.show = false;  
  48. this.clear();  
  49. var csvdata: Csvdata = new Csvdata();  
  50. csvdata.EwId = this.EwId;  
  51. csvdata.MMID = this.MMID;  
  52. csvdata.PNO12 = this.PNO12;  
  53. csvdata.PWeight = this.PWeight;  
  54. csvdata.SegmentCo2 = this.SegmentCo2;  
  55. csvdata.CreatedBy = this.CreatedBy;  
  56. csvdata.CreatedOn = this.CreatedOn;  
  57. csvdata.UpdatedBy = this.UpdatedBy;  
  58. csvdata.UpdatedOn = this.UpdatedOn;  
  59. }