結果のデータ配列の一部のみを示す角度

Question

例hereを続行し、正常なAPI結果を得た後、htmlコンポーネントを取得してTypeScriptコンポーネントで定義されたデータ配列全体を表示することはできません。 1つのフィールドのみが表示されます。ここで

は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、タスク名とisCompleteと小文字で、「キューイング」属性のように。