角只显示结果数据数组的一部分。

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

请在控制台中打印'result.json()‘的结果。

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

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

使用id、taskName和isComplete (小写)，如‘排队’属性。