Почему эти данные не отображаются

Question

Я изучаю Angular и начал с примера проекта в Visual Studio под названием Angular5TF1. В примере есть пункт меню «Fetch Data», который эмулирует получение данных с сервера. Я скопировал этот метод, его классы и страницы и пытаюсь заставить его извлекать данные из метода, который я написал - он не работает ..

Я скопировал метод "FetchData" и его классы и страницы из образца и пытаюсь заставить его извлекать данные из метода, который я написал. Возвращаемое значение показывает правильные значения, но когда я пытаюсь отобразить одно из значений из массива, оно возвращает неопределенное значение. Кроме того, я возвращаю 10 значений, цикл for печатает 10 строк, но все они пустые. Может кто-нибудь объяснить, почему и помочь мне получить это работает? Заранее спасибо.

Из компонента html:

<h1>Interests</h1>

<div class="col-lg-12">&nbsp;</div>

<div class="col-lg-10">
    Interest:&nbsp;<input type="text" id="txtInterest" />&nbsp;<button (click)="test()">Add...</button>
</div>

<div class="col-lg-12">&nbsp;</div>
<div class="col-lg-12">&nbsp;</div>

<div class="col-lg-12">
    <p *ngIf="!personalInterests"><em>Loading Interests, Please Wait...</em></p>
</div>


<table class='table' *ngIf="personalInterests">
    <thead>
        <tr>
            <th>Interest Name</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let interest of personalInterests">
            <td>{{ interest.InterestName }}</td>
        </tr>
    </tbody>
</table>

Из компонента

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';
//import { forEach } from '@angular/router/src/utils/collection';

@Component({
    selector: 'interests',
    templateUrl: './interests.component.html'
})
export class InterestsComponent {
    public personalInterests: PersonalInterest[];

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        http.get(baseUrl + 'api/Interest/Interests').subscribe(result => {
            this.personalInterests = result.json() as PersonalInterest[];
        }, error => console.error(error));
    }

    public test() {
        alert(this.personalInterests[1].InterestName);
    }
}

interface PersonalInterest {
    InterestName: string;
}

Ааааа а с контроллера:

    [Route("api/[controller]")]
    public class InterestController : Controller
    {

        [HttpGet("[action]")]
        public IEnumerable<Interest> Interests()
        {
            var rng = new Random();
            IEnumerable<Interest> PersInt =  Enumerable.Range(1, 10).Select(index => new Interest
            {
                InterestName = string.Format("Test_{0:00}", index)
            });

            //To simulate a slow connection
            System.Threading.Thread.Sleep(2000);
            return PersInt;
        }

        public class Interest
        {
           public string InterestName { get; set; }

        }
    }

Answer 1

Использование Camel Case решило проблему.