update and add new row is not working in angular 4

Question

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

<table class="table table-striped table-bordered" cellspacing="0">
<thead class="table-inverse">
<tr>
<th>EWID</th>
<th>MMID</th>
<th>PNO12</th>
<th>PWeight</th>
<th>SegmentCO2</th>
<th>CreatedBy</th>
<th>CreatedOn</th>
<th>UpdatedBy</th>
<th>UpdatedOn</th>
<th>Actions</th>
</tr>
<tr *ngFor="let movie of preview let i=index">
<td>
<span *ngIf="!movie.showEdit">{{movie.EwId}}</span>
<input type="text" [(ngModel)]="movie.EwId" *ngIf="movie.showEdit" style="width: 112px" class="form-control">
</td>
<td>
<span *ngIf="!movie.showEdit"> {{movie.MMID}} </span>
<input type="text" [(ngModel)]="movie.MMID" *ngIf="movie.showEdit" style="width: 112px" class="form-control">
</td>
<td>
<span *ngIf="!movie.showEdit"> {{movie.PNO12}}</span>
<input type="text" [(ngModel)]="movie.PNO12" *ngIf="movie.showEdit" style="width: 112px" class="form-control">
</td>
<td>
<div class="hideextra" style="width:75px">
<span *ngIf="!movie.showEdit"> {{movie.PWeight}} </span>
<input type="text" [(ngModel)]="PWeight" *ngIf="movie.showEdit" style="width: 112px" class="form-control">
</div>
</td>
<td>
<div class="hideextra">
<span *ngIf="!movie.showEdit"> {{movie.SegmentCo2}} </span>
<input type="text" [(ngModel)]="movie.SegmentCo2" *ngIf="movie.showEdit" style="width: 112px" class="form-control">
</div>
</td>
<td class="medium-columnwidth">
<div class="hideextra table-width">
<span *ngIf="!movie.showEdit"> {{movie.CreatedBy}} </span>
<input type="text" [(ngModel)]="movie.CreatedBy" *ngIf="movie.showEdit" style="width: 112px" class="form-control">
</div>
</td>
<td class="medium-columnwidth">
<div class="hideextra table-width">
<span *ngIf="!movie.showEdit"> {{movie.CreatedOn}} </span>
<input type="text" [(ngModel)]="movie.CreatedOn" *ngIf="movie.showEdit" style="width: 112px" class="form-control">
</div>
</td>
<td class="medium-columnwidth">
<div class="hideextra table-width">
<span *ngIf="!movie.showEdit"> {{movie.UpdatedBy}} </span>
<input type="text" [(ngModel)]="movie.UpdatedBy" *ngIf="movie.showEdit" style="width: 112px" class="form-control">
</div>
</td>
<td class="medium-columnwidth">
<div class="hideextra table-width">
<span *ngIf="!movie.showEdit"> {{movie.UpdatedOn}} </span>
<input type="text" [(ngModel)]="movie.UpdatedOn" *ngIf="movie.showEdit" style="width: 112px" class="form-control">
</div>
</td>
<td>
<a href="javascript:void(0)"
(click)="deletecsv(i)" *ngIf="!movie.cancel"
class="btn btn-danger btn-xs pull-right">Delete</a>
<a href="javascript:void(0)" *ngIf="movie.showupdate"
(click)="update(movie)"
class="btn btn-primary btn-xs pull-right">Update</a>
<a href="javascript:void(0)" *ngIf="movie.showsave"
(click)="addcsv(csvsingle)"
class="btn btn-primary btn-xs pull-right">Save</a>
<a href="javascript:void(0)" *ngIf="!movie.showEdit"
(click)="editcsv(movie)"
class="btn btn-primary btn-xs pull-right">Edit</a>
<a href="javascript:void(0)" *ngIf="movie.cancel"
(click)="cancel(movie)"
class="btn btn-primary btn-xs pull-right">Cancel</a>
</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<button (click)="newcsv()">Add</button>//add a new row
</div>

component.ts

public preview: Csvdata[];
public updatepreview: Csvdata;
private csvsingle: Csvdata = new Csvdata();
update(movie: Csvdata)
{
this.preview = []
var obj = new Csvdata();
obj.EwId = movie.EwId
obj.MMID = movie.MMID
obj.PNO12 = movie.PNO12
obj.PWeight = movie.PWeight
obj.SegmentCo2 = movie.SegmentCo2
obj.CreatedBy = movie.CreatedBy;
obj.CreatedOn = movie.CreatedOn;
obj.UpdatedBy = movie.UpdatedBy;
obj.UpdatedOn = movie.UpdatedOn;
this.preview.push(obj)
}
cancel(movie: Csvdata) {
movie.showEdit = false;
movie.cancel = false;
movie.showupdate = false;
}
editcsv(i: Csvdata)
{
this.edited = true;
this.saveD = false;
i.showupdate = true;
i.cancel = true;
i.showEdit = i.showEdit ? false : true;
this.updatepreview=i
this.EwId = i.EwId
this.MMID = i.MMID
this.PNO12 = i.PNO12
this.PWeight = i.PWeight
this.SegmentCo2 = i.SegmentCo2
this.CreatedBy = i.CreatedBy
this.CreatedOn = i.CreatedOn
this.UpdatedBy = i.UpdatedBy
this.UpdatedOn = i.UpdatedOn
this.showSave = true;
this.show = false;
}
newcsv()//add a new row
{
this.showSave = true;
this.show = false;
this.clear();
var csvdata: Csvdata = new Csvdata();
csvdata.EwId = this.EwId;
csvdata.MMID = this.MMID;
csvdata.PNO12 = this.PNO12;
csvdata.PWeight = this.PWeight;
csvdata.SegmentCo2 = this.SegmentCo2;
csvdata.CreatedBy = this.CreatedBy;
csvdata.CreatedOn = this.CreatedOn;
csvdata.UpdatedBy = this.UpdatedBy;
csvdata.UpdatedOn = this.UpdatedOn;
}