I have created an MVC project then I added the angulare2 files to it then I have created 2 pure html pages one for (add / edit) actions and the second is for list When I click on a row the key should be passed in the url (query string) to redirect to the (add / edit) page to load the data.
the problem is that the Angular2 Script does not work with the edit (data in not loaded) although it is working with the List and add here is my code:
import { Component, OnInit, ViewChild} from '@angular/core';
import { SubscriberService } from '../Service/subscriber.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import { IScubscriber } from '../Models/Subscriber';
import { DBOperation } from '../Shared/enum';
import { Observable } from 'rxjs/Rx';
import { Global } from '../Shared/global';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
templateUrl: 'app/Views/Subscriber/Mangage.subscriber.html'
//templateUrl:'Home/testRoutes'
})
export class ManageSubscriberComponent implements OnInit {
Subscriber: IScubscriber;
Subscribers: IScubscriber[];
msg: string;
indLoading: boolean = false;
subscriberFrm: FormGroup;
dbops: DBOperation;
Title: string;
BtnTitle: string;
id: number;
constructor(private fb: FormBuilder, private _SubscriberService: SubscriberService, private router: Router, private route: ActivatedRoute) { }
ngOnInit(): void {
this.subscriberFrm = this.fb.group({
Id: [''],
Name: ['', Validators.required],
NameOther: [''],
Address: [''],
AddressOther: [''],
Phone1: [''],
Phone2: [''],
IsActive: ['', Validators.required],
IsDeleted: [''],
CreatedBy: [''],
CreatedIn: [''],
UpdatedBy: [''],
UpdatedIn: [''],
});
this.id = +this.route.snapshot.params['id'];
if (isNaN(this.id)) {
this.addSubscriber();
}
else {
this.editSubscriber(this.id);
}
}
addSubscriber() {
this.dbops = DBOperation.create;
this.SetControlsState(true);
this.Title = "Add New Subscriber";
this.BtnTitle = "Add";
this.subscriberFrm.reset();
//this.router.navigateByUrl('/home');
}
editSubscriber(id: number) {
this.dbops = DBOperation.update;
this.SetControlsState(true);
this.Title = "Edit Subscriber";
this.BtnTitle = "Update";
//this.indLoading = true;
this._SubscriberService.getById(Global.BASE_SUBSCRIBER_ENDPOINT, id)
.subscribe(Subscriber => { this.Subscriber = Subscriber; this.indLoading = false; },
error => this.msg = <any>error);
//this.Subscriber = this.Subscribers.filter(x => x.Id == id)[0];
console.log(this.Subscriber);
this.subscriberFrm.setValue(this.Subscriber);
// this.modal.open();
}
//deleteSubscriber(id: number) {
// this.dbops = DBOperation.delete;
// this.SetControlsState(false);
// this.Title = "Confirm to Delete?";
// this.BtnTitle = "Delete";
// this.Subscriber = this.Subscribers.filter(x => x.Id == id)[0];
// this.subscriberFrm.setValue(this.Subscriber);
// this.modal.open();
//}
onSubmit(formData: any) {
this.msg = "";
switch (this.dbops) {
case DBOperation.create:
this._SubscriberService.post(Global.BASE_SUBSCRIBER_ENDPOINT, formData._value).subscribe(
data => {
if (data == 1) //Success
{
this.msg = "Data successfully added.";
//this.LoadSubscribers();
}
else {
this.msg = "There is some issue in saving records, please contact to system administrator!"
}
//this.modal.dismiss();
},
error => {
this.msg = error;
}
);
break;
case DBOperation.update:
this._SubscriberService.put(Global.BASE_SUBSCRIBER_ENDPOINT, formData._value.Id, formData._value).subscribe(
data => {
if (data == 1) //Success
{
this.msg = "Data successfully updated.";
//this.LoadSubscribers();
}
else {
this.msg = "There is some issue in saving records, please contact to system administrator!"
}
//this.modal.dismiss();
},
error => {
this.msg = error;
}
);
break;
case DBOperation.delete:
this._SubscriberService.delete(Global.BASE_SUBSCRIBER_ENDPOINT, formData._value.Id).subscribe(
data => {
if (data == 1) //Success
{
this.msg = "Data successfully deleted.";
//this.LoadSubscribers();
}
else {
this.msg = "There is some issue in saving records, please contact to system administrator!"
}
//this.modal.dismiss();
},
error => {
this.msg = error;
}
);
break;
}
}
SetControlsState(isEnable: boolean) {
isEnable ? this.subscriberFrm.enable() : this.subscriberFrm.disable();
}
}
The List page The Add/ Edit page the routing script:
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home.component';
import { SubscriberComponent } from './components/subscriber.component';
import { ManageSubscriberComponent } from './Components/manage.subsciber.component'
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'subscriber', component: SubscriberComponent },
{ path: 'managesubscriber/:id', component: ManageSubscriberComponent },
{ path: 'managesubscriber', component: ManageSubscriberComponent },
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
I'm not sure I completely understand, but it is important to remember that if your service is performing an Http call, that call is asynchronous. So the code after the subscribe will execute BEFORE the data is retrieved. I numbered the sequence below:
this._SubscriberService.getById(Global.BASE_SUBSCRIBER_ENDPOINT, id) // (1)
.subscribe(Subscriber => { this.Subscriber = Subscriber; this.indLoading = false; //(4) },
error => this.msg = <any>error);
console.log(this.Subscriber); // (2)
this.subscriberFrm.setValue(this.Subscriber); //(3)
To solve this issue, you can add all of the required code within the first subscribe method:
this._SubscriberService.getById(Global.BASE_SUBSCRIBER_ENDPOINT, id)
.subscribe(Subscriber =>
{
this.Subscriber = Subscriber; this.indLoading = false;
//this.Subscriber = this.Subscribers.filter(x => x.Id == id)[0];
console.log(this.Subscriber);
this.subscriberFrm.setValue(this.Subscriber);
},
error => this.msg = <any>error);