Angular只顯示部分結果數據數組

繼續執行示例here，並且在獲得成功的API結果後，我無法獲取HTML組件以顯示TypeScript組件中定義的整個數據數組。只列出一個字段。Angular只顯示部分結果數據數組

這裏是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

上午什麼我做錯了？

來源

2017-10-19 Sami-L

檢查你的模型的屬性名稱與後端和前端 –

是螞蟻的截圖？對不起，我只是不得不說。 – ZombieChowder

@ZombieChowder對不起，我增加了屏幕截圖的大小，現在可以嗎？ –

請在控制檯中輸出'result.json（）'的結果。

無論如何，屬性通常以小寫字母開頭。也許接口應該是：

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

與ID，TASKNAME和isComplete用小寫字母，像 '排隊' 屬性。

來源

2017-10-19 10:46:35

Angular只顯示部分結果數據數組

回答

相關問題