Javascript 角度2:Can'；t在子模板中使用从父模板传递的数组

我正在尝试使用Angular 2创建看板表。基本上，我的应用程序中有以下组件结构：

应用程序

• app.component.ts

• app.component.html

• project.class.ts

• 任务分配

  • 任务分配.component.ts

  • task assignment.component.html

  • task.class.ts

我的

app.component.ts

看起来像这样：

import { Component } from '@angular/core';
import { ProjectObject } from './project.class';

import { TaskAssignmentComponent } from './task-assignment/task-assignment.component';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {

    title = 'My Project Table';

    // array of tasks
    tasks = [];

    // array of assignable projects (non-dynamic)
    projects = [
        new ProjectObject('1', 'Client Request'),
        new ProjectObject('2', 'UI Admin Panel'),
        new ProjectObject('3', 'Webservice')
    ]

    // some functions here...

}

import { Component, Input} from '@angular/core';
import { AppComponent } from '../app.component';
import { TaskObject } from './task.class';

@Component({
    selector: 'task-assignment',
    templateUrl: './task-assignment.component.html',
    styleUrls: ['./task-assignment.component.css']
})

export class TaskAssignmentComponent {

    @Input('tasks') tasks: Array<any>;
    @Input('projects') projects: Array<any>;

    // some functions here...

}

export class ProjectObject {
  constructor(
    public ID: string,
    public name: string
  ){}
}

My

app.component.html

包含我试图向其传递项目对象的任务分配组件：

<task-assignment [tasks]="tasks" [projects]="projects"></task-assignment>

我已经尝试使用

task assignment.component.ts

中的OnInit函数将我的projects对象记录到控制台，并已成功

但是-相应的模板

task assignment.component.html

不知何故无法访问

项目

对象。浏览器控制台或网页包中没有呈现错误

知道我做错了什么吗？ 先谢谢你

=======更新===========

我的

project.class.ts

如下所示：

import { Component } from '@angular/core';
import { ProjectObject } from './project.class';

import { TaskAssignmentComponent } from './task-assignment/task-assignment.component';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {

    title = 'My Project Table';

    // array of tasks
    tasks = [];

    // array of assignable projects (non-dynamic)
    projects = [
        new ProjectObject('1', 'Client Request'),
        new ProjectObject('2', 'UI Admin Panel'),
        new ProjectObject('3', 'Webservice')
    ]

    // some functions here...

}

import { Component, Input} from '@angular/core';
import { AppComponent } from '../app.component';
import { TaskObject } from './task.class';

@Component({
    selector: 'task-assignment',
    templateUrl: './task-assignment.component.html',
    styleUrls: ['./task-assignment.component.css']
})

export class TaskAssignmentComponent {

    @Input('tasks') tasks: Array<any>;
    @Input('projects') projects: Array<any>;

    // some functions here...

}

export class ProjectObject {
  constructor(
    public ID: string,
    public name: string
  ){}
}

使用

ngOnInit（）

方法在

task assignment.component.ts

中执行

console.log（this.projects）

，打印出以下内容：

Array[3]
  0: ProjectObject
  ID: "1"
  name: "Client Request"
  __proto__: Object // array with constructor info 'n' stuff inside

  1: ProjectObject
  ID: "2"
  name: "UI Admin Panel"
  __proto__: Object // array with constructor info 'n' stuff inside

  2: ProjectObject
  ID: "3"
  name: "Webservice"
  __proto__: Object

  length: 3
  __proto__: Array[0]

---

尝试在选项标记内呈现{project | json}}。JSON数据是否如您所期望的那样？看起来你有身份证和名字，我想知道这个案子是否正确谢谢你的提示-我已经试过了。不幸的是，它不会打印任何内容。我通过提供projects对象的project.class.ts内容以及console.log更新了我的帖子。也许这有助于揭示问题……当您尝试通过字符串插值来console.log时，会发生什么情况？它有用吗？如果没有，您看到了什么错误？我试图在中复制此问题，但没有发现任何问题，它有效，希望此链接有帮助you@Muirik当我尝试时，它会按预期打印出所有三个对象。不知道为什么模板表达式无法访问数据…请尝试在选项标记内呈现{{project | json}}。JSON数据是否如您所期望的那样？看起来你有身份证和名字，我想知道这个案子是否正确谢谢你的提示-我已经试过了。不幸的是，它不会打印任何内容。我通过提供projects对象的project.class.ts内容以及console.log更新了我的帖子。也许这有助于揭示问题……当您尝试通过字符串插值来console.log时，会发生什么情况？它有用吗？如果没有，您看到了什么错误？我试图在中复制此问题，但没有发现任何问题，它有效，希望此链接有帮助you@Muirik当我尝试时，它会按预期打印出所有三个对象。不知道模板表达式无法访问数据的原因。。。