javascript – Preciso pecorrer um json ultilizando HttpClient em angular, mais não consigo acessar o subnivel do Json

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

const url = 'http://localhost:3000';

interface Paises {
  id: number;
  country: string;
  cities: City();
}

interface Cities {
  city: City();
}

interface City {
  id: number;
  city: string;
  lat: number;
  lon: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ('./app.component.css'),
})
export class AppComponent implements OnInit {
  paises: Paises() = ();
  city: Cities() = ();

  constructor(private httpClient: HttpClient) {}

  ngOnInit(): void {
    this.httpClient.get<Paises()>(`${url}/countries`).subscribe((dados) => {
      this.paises = dados;
      console.log(this.paises);
    });
    console.log(this.paises);
  }
}
<h3>País de origem:</h3>
<select>
  <option *ngFor="let item of paises" value="{{ item.country }}">
    {{ item.country }}
  </option>
</select>

<h3>Cidade de origem:</h3>
<select>
  <div *ngFor="let item of paises">
    <option *ngFor="let item of item.cities" value="{{item.city}}">
    {{item.city}}
    </option>
  </div>
</select>

<h3>Pais de Destino:</h3>
<select>
  <option *ngFor="let item of paises" value="{{ item.country }}">
    {{ item.country }}
  </option>
</select>

<h3>Cidade de Destino:</h3>
<select>
  <option *ngFor="let item of paises" value="{{ item.country }}">
    {{ item.country }}
  </option>
</select>