Я создал проект MVC, затем добавил к нему файлы angulare2, затем я создал 2 чистые html-страницы, одну для действий (добавить / редактировать), а вторая - для списка. Когда я нажимаю на строку, ключ должен быть передан в URL-адресе (строка запроса) для перенаправления на страницу (добавления / редактирования) для загрузки данных.

Проблема в том, что Angular2 Script не работает с редактированием (данные не загружены), хотя он работает со списком, и добавьте сюда мой код:

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();
 }

 }

Страница списка Страница добавления / редактирования сценарий маршрутизации:

               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);
0
Mohamed Salah 31 Июл 2017 в 17:55

1 ответ

Лучший ответ

Я не уверен, что полностью понимаю, но важно помнить, что если ваша служба выполняет вызов Http, этот вызов является асинхронным. Таким образом, код после подписки будет выполняться ПЕРЕД извлечением данных. Я пронумеровал последовательность ниже:

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)

Чтобы решить эту проблему, вы можете добавить весь требуемый код в первый метод подписки:

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);
0
DeborahK 31 Июл 2017 в 19:38
Большое спасибо за объяснение, что это сработало успешно, и спасибо за ваши курсы на множестве сайтов
 – 
Mohamed Salah
31 Июл 2017 в 21:06
Рад, что у вас сработало! Можете ли вы отметить это как свой ответ, чтобы вопрос был закрыт? Спасибо!
 – 
DeborahK
31 Июл 2017 в 21:09
Я голосую за вопрос, но вижу сообщение «Спасибо за отзыв! Как только вы заработаете 15 репутации, ваши голоса изменят общедоступный рейтинг публикации.
 – 
Mohamed Salah
31 Июл 2017 в 21:25
Хм. Как исходный постер (OP) вы должны иметь возможность пометить свой вопрос как ответ ... даже с очень небольшим количеством очков репутации. Обратите внимание, что отметка вопроса как ответ отличается от того, чтобы проголосовать за него.
 – 
DeborahK
31 Июл 2017 в 21:27