Estoy tratando de obtener datos de un servidor web, lo que hace con éxito ya que puedo enviar el objeto a la consola, pero no se representará en la plantilla del componente.

 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); }); } }

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

¿Por qué solo los datos se envían a la consola y no se muestran en la página real?

Lo que se envía a la consola:

 { "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" } ] } }

La interfaz para el país:

 import { ICity } from "./city"; export interface ICountry { name: string, capital: string, language: string, population: number, density: number, area: number, majorCities: ICity[] }