Currently, I'm developing an Angular project that is connected to a Firestore database. In summary, the pages are stored in the database, and I have created a PageComponent that displays a URL like this: page/'id' and showcases the corresponding page based on the linked id. Despite using functions from a service that work on other components, I am facing an issue where I can only retrieve the page's id.
Below is my TypeScript code:
export class PageComponent implements OnInit {
auth = this.admin.auth;
id: string = '';
page: Page = {
id: '',
titre: '',
contenu: '',
};
constructor(
private pagesservice: PagesService,
private route: ActivatedRoute,
private admin: AdminLoginService
) {}
ngOnInit(): void {
this.id = this.route.snapshot.paramMap.get('id') as string;
if (this.id) {
this.pagesservice.getPage(this.id).subscribe((p) => {
this.page = p;
});
}
console.log(this.id);
console.log(this.page);
}
}
And here is the service implementation:
export class PagesService {
// Service methods for CRUD operations
}
Upon logging the output of ngOninit, here's what I get:
// console.log(this.id)
b
// console.log(this.page)
Object { id: "", titre: "", contenu: "" }
contenu: ""
id: ""
titre: ""
The problem seems to revolve around the specific component - admin edit :
export class PagesFormComponent implements OnInit {
// Implementation details for admin functionality
}
Finally, here is a snippet of the HTML template used:
<div class="container-fluid p-5">
<form #pageForm="ngForm">
<!-- Form elements -->
</form>
</div>
The service functions correctly for other components, fetching data to populate an editing form. I need assistance in identifying the mistake that I might be making.