ARTICLE AD BOX
I am working on a MEAN stack web application but I am having issues with getting the administrator single page application to consistently show the table data in a *ngFor loop. On first load up the table is empty after the row of headers, but making any change to the html file triggers a component update in the ng serve PowerShell window, which then toggles between the table data being displayed or not. The animal-Listing.html is this:
<div class="logo"> <img src="assets/images/Grazioso-Salvare-Logo.jpg" alt="Grazioso Salvare Logo"> </div> <div> <button (click)="addDog()" class="btn btn-info">Add Dog</button> <button (click)="addMonkey()" class="btn btn-info">Add Monkey</button> </div> <div class="row"> <div class="animalTable"> <table> <tr> <th>Name</th> <th>Animal Type</th> <th>Training Status</th> <th>Reserved</th> </tr> <tr *ngFor="let animal of animals"> <td>{{ animal.name }}</td> <td>{{ animal.animalType }}</td> <td>{{ animal.trainingStatus }}</td> <td>{{ animal.reserved }}</td> </tr> </table> </div> </div>While the matching TypeScript file is:
import { Component, OnInit } from '@angular/core'; import { CommonModule } from '@angular/common'; import { AnimalData } from '../services/animal-data'; import { Animal, Dog, Monkey } from '../models/animal'; import { Router } from '@angular/router'; @Component({ selector: 'app-animal-listing', standalone: true, imports: [CommonModule], templateUrl: './animal-listing.html', styleUrl: './animal-listing.css', providers: [AnimalData] }) export class AnimalListing implements OnInit{ animals!: any[]; message: string = ''; constructor( private animalDataService: AnimalData, private router: Router ) { console.log('animal-listing constructor'); } public addDog(): void { this.router.navigate(['add-dog']); } public addMonkey(): void{ this.router.navigate(['add-monkey']); } private getStuff(): void{ this.animalDataService.getAnimals() .subscribe({ next: (value: any) => { this.animals = value; if(value.length > 0){ this.message = 'There are ' + value.length + ' animals available.'; } else{ this.message = 'There were no animals retrieved from the database.'; } console.log(this.message); }, error: (error: any) => { console.log('Error: ' + error); } }) } ngOnInit(): void { console.log('ngOnInit'); this.getStuff(); } }The firefox inspect element console window shows the log messages showing that the data was successfully pulled from the MongoDB database into the list, along with the changing visibility of page content as it switches between showing the base page, the add-dog page, and the add-monkey page.
[vite] connected from window ae41d69a-8c2d-492c-a04d-4e726ec4dcb4:67:11 [vite] new window visibility visible ae41d69a-8c2d-492c-a04d-4e726ec4dcb4:63:12 [vite] new window visibility hidden ae41d69a-8c2d-492c-a04d-4e726ec4dcb4:63:12 [vite] new window visibility visible ae41d69a-8c2d-492c-a04d-4e726ec4dcb4:63:12 [vite] ping successful ae41d69a-8c2d-492c-a04d-4e726ec4dcb4:69:12 [vite] connected from window 71241438-d1a3-4aba-a7ff-4f2d4d2b815d:67:11 [vite] new window visibility visible 71241438-d1a3-4aba-a7ff-4f2d4d2b815d:63:12 [vite] ping successful 71241438-d1a3-4aba-a7ff-4f2d4d2b815d:69:12 [vite] connecting... client:733:9 Angular is running in development mode. _debug_node-chunk.mjs:10489:13 animal-listing constructor animal-listing.ts:26:13 ngOnInit animal-listing.ts:59:13 [vite] connected. client:827:12 There are 10 animals available.