KeyValuePipe

可以提取出陣列中的陣列中的keyValue

src/app/app.component.css

@@ -2,6 +2,17 @@ p {
   font-family: Lato;
 }
 
-p.overing {
-  color: green;
+table {
+  border-width: 2px;
+  border-collapse: collapse;
+}
+
+tr > td:first-child {
+  text-align: center;
+}
+
+th,
+td {
+  width: 150px;
+  padding: 10px;
 }

src/app/app.component.html

@@ -1,13 +1,10 @@
-<h3>SlicePipe 使用在字串上</h3>
-<div>
-  完整字串 - <strong>{{ value }}</strong>
-</div>
-<div>
-  Slice 字串 - <strong>{{ value | slice: 0:6 }}</strong>
-</div>
-<hr />
-<h3>Slice Pipe 使用在陣列上</h3>
-<app-task *ngFor="let task of tasks | slice: 0:3" [task]="task"></app-task>
-<div style="margin-left: 20px">
-  待辦事項共 {{ tasks.length }} 件
-</div>
+<table border="1">
+  <tr>
+    <th>欄位</th>
+    <th>內容</th>
+  </tr>
+  <tr *ngFor="let t of task | keyvalue">
+    <td>{{ columnDesc[t.key] }}</td>
+    <td>{{ t.value }}</td>
+  </tr>
+  </table>

src/app/app.component.ts

@@ -1,20 +1,18 @@
 import { Component } from '@angular/core';
-import { Task } from './task';
 
+import { Task } from './task';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
-  styleUrls: [ './app.component.css' ]
+  styleUrls: ['./app.component.css'],
 })
-export class AppComponent  {
-  value = '只會顯示七個字（這裡全不顯示）';
-
-  tasks: Task[] = [
-    new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' }),
-    new Task({ TaskSn: '002', TaskName: '待辦事項 B', State: 'Doing' }),
-    new Task({ TaskSn: '003', TaskName: '待辦事項 C', State: 'None' }),
-    new Task({ TaskSn: '004', TaskName: '待辦事項 D', State: 'None' }),
-  ];
-  }
+export class AppComponent {
+  task = new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' });
 
+  columnDesc = {
+    TaskSn: '編號',
+    TaskName: '名稱',
+    State: '狀態',
+  };
+}