在angular2中订阅后,视图不会更新

时间:2017-08-16 15:11:16

标签: angular

我是第2个角色的新手,我试图在订阅返回新数据后更新表单输入值。

这是我的组成部分:

import { Component, OnInit, NgZone, ChangeDetectorRef  } from '@angular/core';
import { UserInfo } from '../../lib/UserInfo'; 
import { Subscription } from 'rxjs/Subscription';
import { UserInfoService } from '../../services/userinfo.service';
import { FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms';
import { Observable, Subject, BehaviorSubject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

@Component({
   selector: 'app-pagina-profilo',
   templateUrl: './pagina-profilo.component.html',
   styleUrls: ['./pagina-profilo.component.css'],
})
export class PaginaProfiloComponent implements OnInit {
  form: FormGroup;
  subscription: Subscription;
  public userInfo: UserInfo;

  public name: string;
  public surname: string;

  constructor(private zone:NgZone, fb: FormBuilder, private _UserInfo: UserInfoService) {

     this.subscription = this._UserInfo.getMessage().subscribe(data => {       
     this.zone.run(() => this.updatePage(data));
 });




this.form = fb.group({
  'name': ['', Validators.compose([Validators.required, Validators.minLength(4)])],
  'surname': ['', Validators.compose([Validators.required, Validators.minLength(4)])],
});
}


public updatePage(data: any)
{

this.userInfo = data

this.name = this.userInfo['name'];
this.surname = this.userInfo['surname'];

console.log("name ", this.name ); 
}

  ngOnInit() {  }
}

将模型与视图绑定的html代码是:

<input formControlName="name" type="text" class="form-control" placeholder="Name" [value]="name | async">

updatePage()函数中的console.log显示变量已正确更新,但视图html似乎没有更新......出了什么问题?

0 个答案:

没有答案