Question

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

应用

app.component.ts
app.component.html
project.class.ts
任务分配
- task-assignment.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...

}

我的app.component.html包含我正在尝试传递项目对象的任务分配组件：

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

我的任务分配组件代码如下所示：

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

}

在我的子组件模板task-assignment.component.html中，我正在尝试输出这样的Projects对象内容列表：

<select name="project">
  <option value="" selected="selected">choose project</option>
  <option *ngFor="let project of projects" value="{{project.ID}}">{{ project.name }}</option>
</select>

我已经尝试使用我task-assignment.component.ts中的OnInit函数将我的项目对象记录到控制台 - 成功。

但是 - 相应的模板task-assignment.component.html无法以某种方式访问projects对象。浏览器控制台或Webpack中没有呈现错误。

任何想法我在这里做错了什么？先谢谢了。

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

我的project.class.ts看起来像这样：

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

使用console.log(this.projects)方法在task-assignment.component.ts内执行ngOnInit()会打印出以下内容：

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]

Angular 2：不能使用从子模板中的父传递的数组

0 个答案: