无法使用@input 将数据传递给 ng-bootstrap

Question

我有一个包含所有用户列表的组件，当我们单击 edit 或 add new 时，我会打开同一个模式框，其中包含用于编辑或添加新用户的表单。如果我想编辑用户，我需要在模式框中以表单形式显示用户数据。我的模态框在另一个组件中，我需要将数据传递给模态。

在我的 user.component 中，我获取选定用户的数据并将其设置为

const modalRef = this.modalService.open(AddComponent);

this.userService.getUserDetail(username).subscribe((response: UserModel) => {
    this.user = response;
    modalRef.componentInstance.user = this.user;
  });

然后在 modal box component 我设置

export class AddComponent {
      addNewUserForm: FormGroup;
      @Input() user;

constructor (...){
      console.log(this.user) //get undefined
  }
}

我也尝试在 ngOnInit 和 ngAfterViewInit 中设置 console.log(this.user) 但总是得到 undefined

感谢您的帮助...

Answer 1

使用ngOnInit代替constructor

ngOnInit() {
      console.log("hihi", this.name)
   }

嗨，我做了一个工作 Stackbligz

Answer 2

好的，这是答案如果我将 const modalRef = this.modalService.open(AddComponent); 放在 subscribe 中，我会使用 ngOnInit(){console.log(this.user)}

获取数据

this.userService.getUserDetail(username).subscribe((response: UserModel) => {
this.user = response;

const modalRef = this.modalService.open(AddComponent); //i put this here
modalRef.componentInstance.user = this.user;
});

并在 add.component.ts

export class AddComponent implements OnInit{
  addNewUserForm: FormGroup;
  @Input() user;

ngOnInit(){
  console.log(this.user);
 }
}

无法使用@input 将数据传递给 ng-bootstrap

Can not pass data to ng-bootstrap with @input

ng-bootstrap

angular