Question

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

> cloud_sql_proxy -instances=your-connection-name=tcp:3306

像任务maping类一样。

<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>

的Controler：

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

Servivce：

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);
}...}

当我调用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在视图中显示

1 个答案: