I'm trying to fetch data from a webserver, which it does successfully since I can output the object to console, but wont render in the component template.

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>

Why will only the data output to console and not display on the actual page?

What is being output to console:

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

The interface for country:

import { ICity } from "./city";

export interface ICountry {
    name: string,
    capital: string,
    language: string,
    population: number,
    density: number,
    area: number,
    majorCities: ICity[]
}