为什么这个数据不显示

Question

我正在学习 Angular，我从 Visual Studio 中名为 Angular5TF1 的示例项目开始。示例中有一个名为“获取数据”的菜单选项，它模拟从服务器检索数据。我复制了这个方法及其类和页面，并试图让它从我写的方法中检索数据 - 它不起作用..

我从示例中复制了“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;

}

Answer 1

使用 Camel Case 解决了这个问题。