实现功能点

[muyuqiu001]

• 定义基类：包含commit的id、reviewer、修改的文件、时间、commiter
• 构造简单的数据
• 能够将构造的数据展示在前台页面
  • 以行为单位，显示出一个图表
  • 先分为5列，第一列是commit的id，二列是reviewer，三列是时间、四列是修改的文件、最后一类是committer

---

• 构造数据，通过HTTP进行访问，仿照英雄模型中通过InMemoryDbService进行获取
• 优化显示

[muyuqiu001]

• 先将模型搭建起来，能够跑起来，然后展示Title为The committed details of This Project

[muyuqiu001]

• 定义出默认的数据，然后使用表的结构，将定义的数据展示出来。

[muyuqiu001]

仿照这个可以写一下：
http://www.cnblogs.com/lknny/p/5844846.html

[muyuqiu001]

@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: `
  <h1>{{title}}</h1>
  <ul>
    <li *ngFor="let data of datas" 
      <span>{{data.id}}</span> {{data.file}}
    </li>
  </ul>
  `,
})

有报错：
cant-bind-to-ngforof-since-it-isnt-a-known-property

[muyuqiu001]

在公司没有问题：

import { Component } from '@angular/core';

import { ReviewData } from './reviewdata';

const DATAS: ReviewData[] = [
    {
        id: "zkasdf1",
        reviewer: "00316400",
        reviewtime: "201702242200",
        file: "12.txt",
        committer: "00388224",
    },
    {
        id: "zkasdf12",
        reviewer: "00316400",
        reviewtime: "201702232200",
        file: "123.txt",
        committer: "00388224",
    },
    {
        id: "zkasdf123",
        reviewer: "00316400",
        reviewtime: "201702235200",
        file: "1234.txt",
        committer: "00388224",
    },
];

@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: `
        <h1>{{title}}</h1>
        <div>
            <table border="2">
                <thead>
                    <td>
                        Commit Id
                    </td>
                    <td>
                         Reivew Person
                    </td>
                    <td>
                        Review Time
                    </td>
                    <td>
                        Reivew File
                    </td>
                    <td>
                        Commit Person
                    </td>
                </thead>
                <tr *ngFor="let data of datas">
                    <td>
                        {{data.id}}
                    </td>
                    <td>
                        {{data.reviewer}}
                    </td>
                    <td>
                        {{data.reviewtime}}
                    </td>
                    <td>
                        {{data.file}}
                    </td>
                    <td>
                        {{data.committer}}
                    </td>
                </tr>
            </table>
        </div>
    `,
})

export class AppComponent {
    title = 'The committed details of This Project';
    datas = DATAS;
}