Estoy tratando de hacer que mi plantilla muestre datos del componente cuando se carga. He intentado usar la condición * ngIf establecida en el objeto que se está cargando en sí mismo.

Así como esto:

 <table> <tbody *ngIf="country"> <tr> <td>{{country.name}}</td> <td>{{country.population}}</td> <td>{{country.area}}</td> <td>{{country.language}}</td> </tr> </tbody> </table>

Sin embargo, no se muestra nada en la página. Así es como se ve mi componente:

 import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { BackendService } from 'src/app/backend.service'; import { ICountry } from '../interfaces/country'; @Component({ selector: 'app-countrydetails', templateUrl: './countrydetails.component.html', styleUrls: ['./countrydetails.component.css'] }) export class CountrydetailsComponent implements OnInit { public country: ICountry; constructor(private _backendService: BackendService, private router: Router) { } ngOnInit(): void { this.getCountry(this.router.url.replace('/','')); } getCountry(country: string): void { this._backendService.getCountry(country).subscribe(data => { this.country = data; console.log(data); }); } }

¿Qué debo hacer para que la plantilla muestre mis datos cuando el objeto ya no está indefinido?

{{país|json}}

 { "country": { "name": "Russia", "capital": "Moscow", "language": "Russian", "population": "144526636", "density": "8.4", "area": "3969100", "majorCities": [ { "name": "Moscow", "population": "12506468", "area": "2562", "rank": "1" }, { "name": "Saint Petersburg", "population": "5351935", "area": "1439", "rank": "2" }, { "name": "Novosibirsk", "population": "1473754", "area": "503", "rank": "3" } ] } }