Angular仅显示结果数据数组的一部分

Question

继续示例here，在获得成功的API结果后，我无法获取html组件来显示TypeScript组件中定义的整个数据数组。只列出了一个字段。

这是todo.component.ts文件

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

@Component({
    selector: 'todo',
    templateUrl: './todo.component.html'
})
export class TodoComponent {
    public todolist: todo[];

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        http.get(baseUrl +'api/todo').subscribe(result => {
            this.todolist = result.json() as todo[];
        }, error => console.error(error));
    }
}
// 
interface todo {
    Id: number;
    TaskName: string;
    IsComplete: boolean;
    queueing: number;
}

这是todo.component.html

<h1>To do List</h1>

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

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

<table class='table' *ngIf="todolist">
    <thead>
        <tr>
            <th>ID</th>
            <th>Task Name</th>
            <th>Is complete</th>
            <th>queueing</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of todolist">
            <td>{{ item.Id }}</td>
            <td>{{ item.TaskName }}</td>
            <td>{{ item.IsComplete }}</td>
            <td>{{ item.queueing }}</td>
        </tr>
    </tbody>
</table>

呈现的HTML

我做错了什么？

Answer 1

请打印＆＃39; result.json（）＆＃39;的结果在控制台中。

无论如何，属性通常以小写字母开头。也许界面应该是：

interface todo {
    id: number;
    taskName: string;
    isComplete: boolean;
    queueing: number;
}

id，taskName和isComplete with smallcase，如＆＃39; queuing＆＃39;属性。