ngOnInit 服务数据不适用于角度 5 中的构造函数答案

【问题标题】：ngOnInit service data not working on constructor in angular 5ngOnInit 服务数据不适用于角度 5 中的构造函数
【发布时间】：2018-07-18 02:58:08
【问题描述】：

我是 Angular 5 的新手。请帮助我。我尝试在构造函数中使用 ngOnInit() 中可用的角度服务数据。我得到了响应并存储在 this.users 中。但我在构造函数中使用了 this.users 代码。它不工作

下面是我的构造函数代码。

constructor(private dataService: DataService,private fb: FormBuilder) {


this.myForm = this.fb.group({
users: this.fb.array([])
})

let dataArr = new FormArray([]);
dataArr.push(new FormGroup({
'name': new FormControl(this.users[0].data[0].name,Validators.required),
'category': new FormControl(this.users[0].data[0].category)
}));

let formArr = <FormArray>this.myForm.controls.users;
formArr.push(fb.group({
name: this.users[0].name,
displayOrder: this.users[0].displayOrder,
data: dataArr
}));
}

以下是我的 ngOnInt 代码：

ngOnInit() {
  this.dataService.getArchList()
.subscribe(data => this.users = data,
error => this.errorMsg = error
);
}

请告诉我如何在页面加载时使用 this.users。

【问题讨论】：

不要将创建表单的代码放在构造函数中。制作一个函数并在订阅中调用该函数（等于this.user=data之后）

标签： angular typescript

【解决方案1】：

将访问this.users 的代码移动到.subscribe() 内的ngOnInit()。

构造函数在ngOnInit()之前被调用，而.subscribe(data => this.users = data...是异步执行的，因此当你试图在构造函数中访问this.users[0].data[0]时this.users = data没有被执行。

ngOnInit() {
  this.dataService.getArchList()
    .subscribe(data => {
       this.users = data;
       //Your code that accesses this.users
    }, 
     error => {
       this.errorMsg = error
    }
);
}

看看here。

【讨论】：