Angular 2 TypeScript JSON 在视图中显示

Question

我对这个 Angular 2 TS JSON 有疑问。我过去在编写 AngularJS，但现在我正在尝试 Angular 2 和 TS。当我试图在视图中显示它们时，我无法理解 Json 响应如何在这里工作。我知道这种在选择器选项中显示一个值是错误的，不用担心。

<tr *ngFor="let task of tasks;let myIndex = index">
        <th> {{myIndex+1}}</th>
        <td>{{task.title}}</td>
        <td>{{task.CreateDate}}</td>
        <td>{{task.CurentMoney}}</td>
        <td>
            <select class="form-control"  id="sel1">
                <option>{{ task.History.month}}</option>
            </select>
        </td>
        <td>

任务映射之类的东西 class .

export class Task{
_id:string;
title: string;
CreateDate: string;
CurentMoney: number;
isDone: boolean;
History: { month: string, monthMoney:number}[];}

控制器：

import { Component } from '@angular/core';
import {TaskService} from '../../services/task.service';
import {Task} from '../../../Task';

@Component({
  moduleId: module.id,
  selector: 'tasks',
  templateUrl: 'tasks.component.html'
})

export class TasksComponent {
    bankName: string;
    tasks: Task[];
    title: string;
    CreateDate: string;
    CurentMoney: number;


    constructor(private taskService:TaskService){
        this.taskService.getTasks()
            .subscribe(tasks => {
                this.tasks = tasks;
            });
    } 
testObj(){

    console.log(this.tasks);
}...}

服务：

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import {Task} from "../../Task";

@Injectable()
export class TaskService{
    constructor(private http:Http){
        console.log('Task Service Initialized...');
    }

    getTasks(){
        return this.http.get('/api/tasks')
            .map(res => <Task[]>res.json());
    }

当我调用 testobj() 时，我有正确的控制台输出 json，但是在视图中我无法执行 task.History.month 例如。

Answer 1

您应该使用自定义类型作为

export interface Task{
    _id:string;
    title: string;
    createDate: string;
    curentMoney: number;
    isDone: boolean;
    history: Array<History>;
}
export interface History 
{ 
    month: string, 
    monthMoney:number

}

更新：当你在里面嵌套一个数组时，你需要使用另一个 ngFor 来循环它，如下所示

<div *ngFor="let task of tasks"> 
        <p *ngFor="let item of task.History">Test: {{item.month}}</p> 
</div>

Angular 2 TypeScript JSON 在视图中显示

Angular 2 TypeScript JSON Show in view

typescript

angular2-forms

angular