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>EWIDth>
- <th>MMIDth>
- <th>PNO12th>
- <th>PWeightth>
- <th>SegmentCO2th>
- <th>CreatedByth>
- <th>CreatedOnth>
- <th>UpdatedByth>
- <th>UpdatedOnth>
- <th>Actionsth>
- 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">Deletea>
- <a href="javascript:void(0)" *ngIf="movie.showupdate"
- (click)="update(movie)"
- class="btn btn-primary btn-xs pull-right">Updatea>
- <a href="javascript:void(0)" *ngIf="movie.showsave"
- (click)="addcsv(csvsingle)"
- class="btn btn-primary btn-xs pull-right">Savea>
- <a href="javascript:void(0)" *ngIf="!movie.showEdit"
- (click)="editcsv(movie)"
- class="btn btn-primary btn-xs pull-right">Edita>
- <a href="javascript:void(0)" *ngIf="movie.cancel"
- (click)="cancel(movie)"
- class="btn btn-primary btn-xs pull-right">Cancela>
- td>
- tr>
- thead>
- table>
- div>
- div>
- div>
- <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
- <button (click)="newcsv()">Addbutton>//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;
- }
Sagar Pandurang KapPosted Jan 30, 2018, 12:07 AM