Angular2 FormGroup View 未在订阅中更新

Question

我在这里做什么？

patchValue 运行良好，但 FormGroup 不会更新 View 中的输入值。

我已经尝试过使用手动触发它

private ref: ChangeDetectorRef

此外，在 private _ngZone: NgZone 中使用 .run() 方法不起作用。

这是我的代码:

HTML:

      <form [formGroup]="addressForm">
        <div class="row">
            <!--zip-->
            <div class="form-group col-md-2">
                <label>Zipcode</label>
                <input type="text" class="form-control" formControlName="ZipCode">
                <small [hidden]="addressForm.controls.zipcode.valid" class="text-danger">
        zip is invalid!
                </small>
            </div>

            <!--city-->
            <div class="form-group col-md-3">
                <label>City</label>
                <input type="text" class="form-control" formControlName="City">
            </div>

        </div>
        <div class="row">

            <!--state-->
            <div class="form-group col-md-3">
                <label>State</label>
                <input type="text" class="form-control" formControlName="State">
            </div>

        </div>
        <div class="row">

            <!--street-->
            <div class="form-group col-md-3">
                <label>Street</label>
                <input type="text" class="form-control" formControlName="Street">
            </div>

            <!--streetNumber-->
            <div class="form-group col-md-2">
                <label>Number</label>
                <input type="text" class="form-control" formControlName="StreetNumber">
            </div>
        </div>

地址.Component

import { Observable } from 'rxjs/Observable';
import { AddressService } from './../service/address.service';
import { Address } from './../../../models/adresse.model';
import { NgZone, Component, Input, OnInit,   ChangeDetectionStrategy,ChangeDetectorRef } from '@angular/core';
import { FormGroup, Form, FormBuilder, Validators, FormControl } from     
'@angular/forms';
import { Router, ActivatedRoute, Params } from '@angular/router';


@Component({
moduleId: module.id,
selector: 'address-detail',
templateUrl: 'address-detail.component.html',
changeDetection: ChangeDetectionStrategy.Default
})
export class AddressDetailComponent implements OnInit {

@Input('group')
public addressForm: FormGroup;

constructor(private service: AddressService, private route: ActivatedRoute, private _fb: FormBuilder, private ref: ChangeDetectorRef, private _ngZone: NgZone) {
}

ngOnInit() {

    this.addressForm = this._fb.group({
        ZipCode: ['', Validators.required],
        City: [''],
        State: [''],
        Street: [''],
        StreetNumber: ['', Validators.required]
    });

    let id = this.route.snapshot.params['id'] + "";
    this.service.getAddressBy(id).subscribe((result) => {

        this.addressForm.patchValue(result.Data);
    });
}

服务:

public getAddressBy(Id: string):  
Observable<TransferContainerModel<Address>> {
    let url = AddressService.BASE_URL + 'GetAddressBy/'+Id;

    return this.http.get(url)
                     .map((res:Response) => res.json())
                     .catch((error:any) => 
Observable.throw(error.json().error || 'Server error'));
}

结果数据很好，并且在订阅环境之外按预期工作。有什么提示吗？

Answer 1

看起来你有 Address 的模型所以试试这样的东西:

model: Address = new Address() //I suppose that you have a constructor for Address

this.addressForm = this._fb.group({
        ZipCode: [this.model.zipCode, Validators.required],
        City: [this.model.city],
        State: [this.model.state],
        Street: [this.model.street],
        StreetNumber: [this.model.streetNumber, Validators.required]
    });

现在 patchValue 应该可以工作了:

this.service.getAddressBy(id).subscribe((result) => {
        this.model = result.data
        this.addressForm.patchValue(this.model);
    });