Tech
Forums
Jobs
Books
Events
Interviews
Live
More
Learn
Training
Career
Members
Videos
News
Blogs
Login
Sign Up
Ask Question
0
Reply
update and add new row is not working in angular 4
Karthik Kumar
Nov 19 2017 2:35 AM
241
Reply
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;
}
Upload Source Code
Select only zip and rar file.
Post
Reset
Cancel
Answers (
0
)
Next Recommended Forum
how to convert csv file to json format in angular 4?
How to add items in json data object while sending to DB