尽管 Angular2 脚本在列表和添加表单中工作，但它在更新表单中不起作用

Question

我创建了一个 MVC 项目，然后向其中添加了 angulare2 文件然后我创建了 2 个纯 html 页面，一个用于（添加/编辑）操作，第二个用于列表当我单击一行时，应在 url（查询字符串）中传递密钥以重定向到（添加/编辑）页面以加载数据。

问题是 Angular2 脚本无法处理编辑（数据未加载），尽管它正在处理列表和添加这是我的代码：

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 路由脚本：

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

Answer 1

我不确定我是否完全理解，但请务必记住，如果您的服务正在执行 Http 调用，则该调用是异步的。所以订阅之后的代码会在BEFORE数据被取回之前执行。我对下面的序列进行了编号：

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

尽管 Angular2 脚本在列表和添加表单中工作，但它在更新表单中不起作用

Angular2 Script does not work in update form although it is working in the List and add forms

asp.net-mvc

asp.net-mvc-4

angular2-routing

angular2-services

angular