I'm trying to pass data into a modal . The modal is a separate component alltogether.
I'm able to console.log the bsModalRef property in the constructor, but for some reason, I can't console.log the bsModalRef.content property.
Here is my code in the page I'm launching the modal from...
<button class="btn btn-primary"
type="button"
(click)="openDeleteModal(result.id)">
Edit
</button>
Here is the code for that openDeleteModal() method...
public openDeleteModal(id: number): void {
this.selectedCase = this.listOfSearchResults.filter(result => result.id == id);
const initialState: ModalOptions = {
initialState: {
list: [
this.selectedCase
],
title: 'Edit Case',
whatYouWantToDelete: 'this error'
}
};
this.bsModalRef = this.modalService.show(DeleteModalComponent, initialState);
}
Now, for the code in the modal itself, I'm importing BsModalRef like this...
import { BsModalRef } from 'ngx-bootstrap/modal';
Here are the properties I set...
title?: string;
whatYouWantToDelete?: string;
list?: any[];
initialState: any;
and this is what I have for the constructor...
constructor(
public bsModalRef: BsModalRef,
private http: HttpClient) {
this.list = this.list;
console.log("this.list: ", this.list);
console.log("this.bsModalRef in constructor: ", this.bsModalRef);
console.log("this.bsModalRef.content in constructor: ", this.bsModalRef.content);
}
this is the screenshot of what I'm seeing in the console.log...
And this is the content part of the BsModalRef object...
My question is, how do I access that data in the list property from the constructor? That object has properties that I need to populate a form I have in the modal.
Stated differently...
this line of code...
this.bsModalRef = this.modalService.show(DeleteModalComponent, initialState);
opens the modal and passes in the data as initialState. How do I access the data that I'm passing in through the initialState object from within the modal itself ?
There are 2 key notes here:
In order to see real data I prefer this:
console.log(JSON.parse(JSON.stringify(this.bsModalRef)));
setTimeout(() => { console.log(this.bsModalRef.content), 0});
But it is a workaound. You should report this to ngx-bootstrap repository .
My question is, how do I access that data in the list property from the constructor? That object has properties that I need to populate a form I have in the modal.
The proper way to access data is within ngOnInit lifecycle hook method.
title
, whatYouWantToDelete
and list
data would be present within ngOnInit; you don't need to access it via bsModalRef instance. Try this:
ngOnInit() {
console.log(this.list);
console.log(this.whatYouWantToDelete);
console.log(this.title);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.