我是第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似乎没有更新......出了什么问题?