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

【问题标题】：Angular showing only a part of the resulting data arrayAngular 仅显示结果数据数组的一部分
【发布时间】：2018-03-31 09:15:28
【问题描述】：

继续示例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

我做错了什么？

【问题讨论】：

使用后端和前端检查模型的属性名称
这是蚂蚁的截图吗？对不起，我不得不说。
@ZombieChowder 抱歉，我增加了截图大小，现在可以了吗？
@Sami-L 是的，只是我在之前的评论中引用了“Zoolander”。

标签： javascript html angular typescript asp.net-web-api

【解决方案1】：

请在控制台打印“result.json()”的结果。

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

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

带有小写的 id、taskName 和 isComplete，如 'queueing' 属性。

【讨论】：