массив, переданный в angular через api, имеет все пустые значения

Question

Я использую угловой 5, и у меня есть следующий компонент:

import { Component, Inject } from '@angular/core';
import { Http } from "@angular/http";

@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent {

    public locations: Location[];
    public flightChoice: FlightChoice;

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {

        http.get(baseUrl + 'api/FlightChoice/dest_locations').subscribe(result => {
            this.locations = result.json() as Location[];
            console.log(this.locations.length);
            for (var i = 0; i < this.locations.length - 1; i++) {
                console.log(this.locations[i].ID + " " +
                    this.locations[i].Name + " " +
                    this.locations[i].Country + " " +
                    this.locations[i].Airport);
            } 
        }, error => console.error(error));

    }

HTML-код для которого:

<h1>Locations</h1>

<p>This component demonstrates fetching data from the server.</p>

<p *ngIf="!locations"><em>Loading...</em></p>

<table class='table' *ngIf="locations">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Country</th>
            <th>Airport</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let location of locations">
            <td>{{ location.ID }}</td>
            <td>{{ location.Name }}</td>
            <td>{{ location.Country }}</td>
            <td>{{ location.Airport }}</td>
        </tr>
    </tbody>
</table>

контроллер API:

 public class FlightChoiceController : BaseApiController
    {
        public FlightChoiceController(FlyDBContext ctx):base(ctx)
        {

        }

        // GET: api/<controller>
        [HttpGet("dest_locations")]
        public IEnumerable<Location> GetDestLocations()
        {
            var locs = DBContext.Locations
                    .Where(l => l.Name != "Napoli").ToArray();
            return locs;
        }


    }
}

Маршрут для контроллера объявлен в базовом контроллере:

 [Route("api/[controller]")]
    public class BaseApiController : Controller
    {
        protected FlyDBContext DBContext;

        public BaseApiController(FlyDBContext ctx)
        {
            DBContext = ctx;
        }
    }

Когда в моем браузере я вызываю маршрут для контроллера, я правильно получаю json для всех значений, но в угловом я получаю массив правильной длины, но со всеми пустыми значениями. Таблица в html заполняется 12 пустыми строками. Все значения массива не определены.

В чем может быть причина? Что я делаю неправильно? Любая подсказка? Спасибо