數值資料顯示-DecimalPipe

src/app/app.component.html

@@ -1,10 +1,2 @@
-<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>
+<div>預設數值顯示：{{ pi | number }}</div>
+<div>指定整數與小數長度：{{ pi | number: '4.1-5' }}</div>

src/app/app.component.ts

@@ -1,18 +1,10 @@
-import { Component } from '@angular/core';
-
-import { Task } from './task';
+import { Component, VERSION } from '@angular/core';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: [ './app.component.css' ]
 })
 export class AppComponent  {
-  task = new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' });
-
-  columnDesc = {
-    TaskSn: '編號',
-    TaskName: '名稱',
-    State: '狀態',
-  };
+  pi = 3.1415926;
 }