Angular 无法使用@input将数据传递到ng引导
我有一个包含所有用户列表的组件,当我们单击Angular 无法使用@input将数据传递到ng引导,angular,ng-bootstrap,Angular,Ng Bootstrap,我有一个包含所有用户列表的组件,当我们单击edit或addnew时,我会打开同一个模式框,其中有一个表单用于编辑或添加新用户。如果我想编辑用户,我需要在模式框中以表格形式显示用户数据。我的模态框在另一个组件中,我需要将数据传递给模态 在myuser.component中,我获取所选用户的数据,并将其设置为 const modalRef = this.modalService.open(AddComponent); this.userService.getUserDetail(username)
edit
或addnew
时,我会打开同一个模式框,其中有一个表单用于编辑或添加新用户。如果我想编辑用户,我需要在模式框中以表格形式显示用户数据。我的模态框在另一个组件中,我需要将数据传递给模态
在myuser.component
中,我获取所选用户的数据,并将其设置为
const modalRef = this.modalService.open(AddComponent);
this.userService.getUserDetail(username).subscribe((response: UserModel) => {
this.user = response;
modalRef.componentInstance.user = this.user;
});
在模态盒组件中
I设置
export class AddComponent {
addNewUserForm: FormGroup;
@Input() user;
constructor (...){
console.log(this.user) //get undefined
}
}
我还尝试在ngOnInit
和ngAfterViewInit
中设置console.log(this.user)
,但总是得到未定义的
感谢您的帮助…使用
ngOnInit
而不是构造函数
ngOnInit() {
console.log("hihi", this.name)
}
嗨,我做了一个工作好的,这是答案
如果我将constmodalref=this.modalService.open(AddComponent)放入
insidesubscribe
I使用ngOnInit(){console.log(this.user)}获取数据
在中添加.component.ts
export class AddComponent implements OnInit{
addNewUserForm: FormGroup;
@Input() user;
ngOnInit(){
console.log(this.user);
}
}
所有这些代码看起来都很好。如果
响应
有一些值,则它应该到达添加组件
。您可以为该问题创建stackblitz吗?@arter porperty在生命周期挂钩或构造函数中不可用,但您可以在打开模式后在某些方法中使用它检查此打开模式并单击日志属性button@jitender是的,当我创建函数并在初始化模式后调用它时,我得到数据。。。但有没有办法“onLoad”或“onInit”或其他方式获取这些数据?这不起作用,已经尝试过了。。。像上面的@jitebder write“属性在生命周期钩子或构造函数中不可用,但在打开模式后可以在某些方法中使用它”。根据您的要求,我制作了一个stackbigz应用程序,您可以在控制台中找到“hihi world”。如果我错了请原谅是的,你是对的。。。但当我使用ngOnInit时,我得到了未定义的。。。因为,我从API获取数据,并且在获取数据之前打开了modal…@Arter,那么您应该在获取API之后打开modalresponse@varman我赞成你的答案,但那不是正确的答案。在我的主要问题中,我写道,我已经尝试使用ngOnInit
,但不起作用。解决方法就像我添加一个答案,将const modalRef…
更改到另一个位置。。。我不能把我的答案标记为正确您可以在2天内接受自己的答案
。。。谢谢你的建议
export class AddComponent implements OnInit{
addNewUserForm: FormGroup;
@Input() user;
ngOnInit(){
console.log(this.user);
}
}