Почему данные таблицы моего сервера Angular, полученные из базы данных Observable из MongoDB, отображают только все оста ⇐ Html

[Anonymous]

Я работаю над веб-приложением стека MEAN, но у меня возникли проблемы с тем, чтобы одностраничное приложение администратора последовательно отображало данные таблицы в цикле *ngFor. При первой загрузке таблица пуста после строки заголовков, но внесение любых изменений в html-файл запускает обновление компонента в окне PowerShell ngserve, которое затем переключается между отображением данных таблицы или нет. Animal-Listing.html выглядит так:


alt="Grazioso Salvare Logo">

Add Dog
Add Monkey




Name
Animal Type
Training Status
Reserved


{{ animal.name }}
{{ animal.animalType }}
{{ animal.trainingStatus }}
{{ animal.reserved }}





А соответствующий файл TypeScript:
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();
}
}

В окне консоли элемента проверки Firefox отображаются сообщения журнала, показывающие, что данные были успешно извлечены из базы данных MongoDB в список, а также изменение видимости содержимого страницы при переключении между отображением базовой страницы, страницы добавления собаки и страницы добавления обезьяны.
[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.mjs13
animal-listing constructor animal-listing.ts:26:13
ngOnInit animal-listing.ts:59:13
[vite] connected. client:827:12
There are 10 animals available.


Подробнее здесь: https://stackoverflow.com/questions/798 ... ongodb-dat