Мой API не исследует объект с городом, который я ввел в поисковый запрос. Я не уверен, что не так?

Question

I used someone code for my weather application, and my api call doesnt 
 working  good, it doesnt display me anything at my page or in 
 console(just empty 
 object).I change just api call in the code, so there is a problem for 
sure. Can 
 anyone help me?

Это мой компонент импорта имени города {Component, Input, OnInit} из '@ angular / core';импортировать {ActivatedRoute, ParamMap} из '@ angular / router';import {Location} из '@ angular / common';import {RouterModule, Routes} из "@ angular / router";import {Http, Response} из "@ angular / http";импорт 'rxjs / add / operator / switchMap';импорт 'rxjs / add / operator / map';@Component ({селектор: 'название города', templateUrl: './city-name.component.html', styleUrls: ['./city-name.component.css']}) класс экспорта CityNameComponent {

    private apiCityUrl;
    dataCity: any = {};

    constructor(
        private http: Http,
        private location: Location,
        private route: ActivatedRoute
    ) {

        this.route.params.subscribe( params =>  
    this.getCityForecast(params['name']));
        this.getCityTest();
        this.getCityData();
    }   
    getCityForecast(cityName) {
  this.apiCityUrl
      ='https://corsanywhere.herokuapp.com/https://www.metaweather.com/api/api/location/search/?query=${city}'
}

    getCityData() {
        return this.http.get(this.apiCityUrl)
            .map((res: Response) => res.json())
    }

    getCityTest() {
        this.getCityData().subscribe(dataCity => {
            console.log(dataCity);
            this.dataCity = dataCity;
        })
    }     
    goBack(): void {
        this.location.back();
    }   
}
This is my cities component:

import { Component, OnInit } from '@angular/core';
import { RouterModule, Routes, ActivatedRoute } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { Http, Response } from "@angular/http"; 
import 'rxjs/add/operator/map'; 
@Component({
  selector: 'cities',
  templateUrl: './cities.component.html',
  styleUrls: ['./cities.component.css']
})
export class CitiesComponent {
  title = 'Weather App S';

  private apiUrl = 'https://cors-anywhere.herokuapp.com/https://www.metaweather.com/api/api/location/search/?query=${city}'
  data: any = {};

  constructor(private http: Http) {
    this.getTest();
    this.getData();
  }

  getData() {
    return this.http.get(this.apiUrl)
      .map((res: Response) => res.json())
  }

  getTest() {
    this.getData().subscribe(data => {
      this.data = data;
    })
  }
}
This is my city component

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Location }                 from '@angular/common';
import { RouterModule, Routes } from "@angular/router";
import { Http, Response } from "@angular/http";

import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';

@Component({
  selector: 'city',
  templateUrl: './city.component.html',
  styleUrls: ['./city.component.css']
})
export class CityComponent {

    private apiCityUrl;
    dataCity: any = {};

    constructor(
        private http: Http,
        private location: Location,
        private route: ActivatedRoute
    ) {

        this.route.params.subscribe( params =>  
        this.getCityForecast(params['id']));
        this.getCityTest();
        this.getCityData();
    }

    getCityForecast(cityId) {

        this.apiCityUrl = 'https://cors-anywhere.herokuapp.com/https://www.metaweather.com/api/api/location/search/?query=${cityId}'
    }

    getCityData() {
        return this.http.get(this.apiCityUrl)
            .map((res: Response) => res.json())
    }

    getCityTest() {
        this.getCityData().subscribe(dataCity => {
            console.log(dataCity);
            this.dataCity = dataCity;
        })
    }


    goBack(): void {
        this.location.back();
    }

}