Http 获取请求成功但没有数据被渲染

Question

我正在尝试从网络服务器获取数据，它成功了，因为我可以将对象输出到控制台，但不会在组件模板中呈现。

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>

为什么只会将数据输出到控制台而不显示在实际页面上？

向控制台输出什么：

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

国家界面：

import { ICity } from "./city";

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

Answer 1

您应该访问国家/地区响应：

getCountry(country: string): void {
    this._backendService.getCountry(country).subscribe(data => {
      this.country = data.country;
      console.log(data);
    });
  }