Angular2具有嵌套json的ngModelGroup的编辑表单

Angular2具有嵌套json的ngModelGroup的编辑表单,angular,typescript,Angular,Typescript,我有以下组件和模板: import { Component } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { JobsService } from '../jobs.service'; import { Validators, FormGroup, FormArray, FormBuilder, FormControl, NgForm } from '@angula

我有以下组件和模板:

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { JobsService } from '../jobs.service';
import { Validators, FormGroup, FormArray, FormBuilder, FormControl, NgForm } from '@angular/forms';

@Component({
  selector: 'job-edit',
  templateUrl: './job-edit.template.html',
  providers: [JobsService],
})

export class JobEditComponent {
  job: any = {};
  errorMessage: string;
  paramsObserver: any;
  public myForm: FormGroup;

  constructor(private _router: Router, private _route: ActivatedRoute, private _jobService: JobsService) {}

  ngOnInit() {
    this.paramsObserver = this._route.params.subscribe(params => {
      let jobId = params['jobId'];
      this._jobService
       .read(jobId)
       .subscribe(
         job => {
           this.job = job;
         },
         error => this._router.navigate(['/jobs'])
       );
     });
   }

   ngOnDestroy() {
     this.paramsObserver.unsubscribe();
   }

   update() {
    this._jobService.update(this.job).subscribe(savedJob => this._router.navigate(['/jobs', savedJob._id]), error => this.errorMessage = error);
   }
 }
下面是模板文件:

        <div class="container">
          <form #myForm="ngForm" (ngSubmit)="update()" novalidate>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label>Duration</label>
                  <div class="form-inline">
                    <fieldset ngModelGroup="_duration" #nameCtrl="ngModelGroup">
                      <input type="number" min="1" step="1" required name="years" id="years" class="form-control" placeholder="Years" ngModel>
                      <input type="number" min="1" step="1" required name="months" id="months" class="form-control" placeholder="Months" ngControl ngModel>
                    </fieldset>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
我的问题是如何绑定数据? 现在,当我单击列表的“编辑”链接时,它会显示表单,但未设置以前的数据

注意:我以前也是这样:

<fieldset ngModelGroup="_duration" #nameCtrl="ngModelGroup">
  <input type="number" min="1" step="1" required name="years" id="years" class="form-control" placeholder="Years" [(ngModel)]="job._duration.years">
  <input type="number" min="1" step="1" required name="months" id="months" class="form-control" placeholder="Months" [(ngModel)]="job._duration.months">
</fieldset>
                <div class="form-group">
                  <label>Duration</label>
                  <div class="form-inline">
                    <fieldset ngModelGroup="_duration">
                      <input *ngIf="job._duration" type="number" min="1" step="1" required name="years" id="years" class="form-control" placeholder="Years" [(ngModel)]="job._duration.years">
                      <input *ngIf="job._duration" type="number" min="1" step="1" required name="months" id="months" class="form-control" placeholder="Months" [(ngModel)]="job._duration.months">
                    </fieldset>
                  </div>
                </div>

只需检查
*ngIf
如下:

<fieldset ngModelGroup="_duration" #nameCtrl="ngModelGroup">
  <input type="number" min="1" step="1" required name="years" id="years" class="form-control" placeholder="Years" [(ngModel)]="job._duration.years">
  <input type="number" min="1" step="1" required name="months" id="months" class="form-control" placeholder="Months" [(ngModel)]="job._duration.months">
</fieldset>
                <div class="form-group">
                  <label>Duration</label>
                  <div class="form-inline">
                    <fieldset ngModelGroup="_duration">
                      <input *ngIf="job._duration" type="number" min="1" step="1" required name="years" id="years" class="form-control" placeholder="Years" [(ngModel)]="job._duration.years">
                      <input *ngIf="job._duration" type="number" min="1" step="1" required name="months" id="months" class="form-control" placeholder="Months" [(ngModel)]="job._duration.months">
                    </fieldset>
                  </div>
                </div>

期间