#1 解决报错与展示数据的能力 #1 (comment)

app/app.component.html

@@ -0,0 +1,39 @@
+<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>

app/app.component.ts

@@ -2,59 +2,37 @@ import { Component } from '@angular/core';
 
 import { ReviewData } from './reviewdata';
 
+const DATAS: ReviewData[] = [
+    {
+        id: "zkasdf1",
+        reviewer: "00316496",
+        reviewtime: "201702242200",
+        file: "12.txt",
+        committer: "00388224",
+    },
+    {
+        id: "zkasdf12",
+        reviewer: "00316496",
+        reviewtime: "201702232200",
+        file: "123.txt",
+        committer: "00388224",
+    },
+    {
+        id: "zkasdf123",
+        reviewer: "00316496",
+        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>
-                    <td>
-                        {{data.id}}
-                    </td>
-                    <td>
-                        {{data.reviewer}}
-                    </td>
-                    <td>
-                        {{data.reviewtime}}
-                    </td>
-                    <td>
-                        {{data.file}}
-                    </td>
-                    <td>
-                        {{data.committer}}
-                    </td>
-                </tr>
-            </table>
-        </div>
-    `,
+    templateUrl:'app.component.html',
 })
 
 export class AppComponent {
     title = 'The committed details of This Project';
-    data: ReviewData = {
-        id: "zkasdf1234",
-        reviewer: "00316496",
-        reviewtime: "201702242200",
-        file: "123.txt",
-        committer: "00388224",
-    };
+    datas = DATAS;
 }

app/app.module.ts

@@ -1,11 +1,14 @@
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent }  from './app.component';
+import { FormsModule } from '@angular/forms';
+import { AppComponent } from './app.component';
 
 @NgModule({
-  imports:      [ BrowserModule ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
+  imports: [
+    BrowserModule,
+    FormsModule
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent]
 })
 export class AppModule { }