diff --git a/src/app/app-path.const.ts b/src/app/app-path.const.ts
index 8447907447626ef4a906c5e25ab53e224be24c0b..d2f6e5f1b98abcd55f265fd668e40737f87a00e1 100644
--- a/src/app/app-path.const.ts
+++ b/src/app/app-path.const.ts
@@ -4,6 +4,8 @@ export const appPath = {
 
   p2: 'p2',
 
-  p3: 'p3'
+  p3: 'p3',
+
+  p4: 'p4'
 
 };
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 93e840832e03ea4d1132c382134b43db35f9dcfa..d22388f42dfcc98bdc4705d11f4c03983674721a 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -14,6 +14,10 @@ const routes: Routes = [
   {
     path: appPath.p3,
     loadChildren: './p3/p3.module#P3Module'
+  },
+  {
+    path: appPath.p4,
+    loadChildren: './p4/p4.module#P4Module'
   }
 ];
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index d2f19ee389be2c520309193534d59ebda4069d5e..3e5b28eeedf0764677cdc0699eb5fdd7b6c6d6e3 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -4,6 +4,7 @@
   <li><a [routerLink]="path.home">練習一</a></li>
   <li><a [routerLink]="path.p2">練習二</a></li>
   <li><a [routerLink]="path.p3">練習三</a></li>
+  <li><a [routerLink]="path.p4">練習四</a></li>
 </ul>
 
 <router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2c3ba2995c8510c02ca812f90280146738f162cf..9db90f063a64d7ff8d735da97bed7b4ca874e193 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,7 +6,7 @@ import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/home/dataList.const.ts b/src/app/home/dataList.const.ts
index 4d01121e6b6ec4d029d4111730e1648b1dd3ff4a..baabc23dd7b7537bfc5411ff0d8a5f5e413a9548 100644
--- a/src/app/home/dataList.const.ts
+++ b/src/app/home/dataList.const.ts
@@ -8,7 +8,7 @@ export const dataList = [
         'lat': 51.5085
       },
       'country': 'GB',
-      'population': 0
+      'population': 0,
     },
     'cod': '200',
     'message': 0.0597013,
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index cf5a34464d93fd8b2d2768e71c932445d46e31e7..ec12856c3ced7224cb94b4244d0ae7a7120f7bd5 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,4 +1,12 @@
 <p style="color:green">題一</p>
+<p>關於這一題我看了很多網站但還是解決不出來，我分別在iT邦幫忙和stackOverflow提問<br>
+  <a href="https://stackoverflow.com/questions/54032064/angular-how-to-do-ngfor-for-associative-array">stackoverflow</a>
+  <br>  <a href="https://ithelp.ithome.com.tw/questions/10192112#answer-353378">iT邦幫忙</a>
+<br>，照著他們的解答我依舊無法解決問題十分抱歉
+<br>我認為問題點在於我無法將associative array插進第二個table裡面（第一個table可以），我嘗試過使用<br>
+*ngFor  *ngif並用、<br>
+ng-container<br>但依舊無法，請bass姐賜教
+</p>
 cnt:<input type="number" min="1" max="7"><br>
 城市資訊;<br>
 <table border="1">
@@ -52,58 +60,59 @@ cnt:<input type="number" min="1" max="7"><br>
       <th>icon</th>
   </tr>
 
-  <tr *ngFor="let item of list">
-			<td>
-          {{item.list_.dt}}
+  <tr *ngFor = "let item of list">
+      <td *ngFor = "let l of item.list_">
+          {{ l.dt * 1000 | date:'yyyy-MM-dd hh:mm:ss'}}
 			</td>
 			<td>
-          {{item.list_.temp.day}} °C
+          {{ l.day }} °C
 			</td>
 			<td>
-          {{item.list_.temp.min}} °C
+          {{item.list_}} °C
 			</td>
 			<td>
-          {{item.list_.temp.max  }} °C
+          {{item.list_ }} °C
 			</td>
 			<td>
-          {{item.list_.temp.night  }} °C
+          {{item.list_  }} °C
 			</td>
 			<td>
-          {{item.list_.temp.eve  }} °C
+          {{item.list_ }} °C
 			</td>
 			<td>
-          {{item.list_.temp.morn  }} °C
+          {{item.list_ }} °C
 			</td>
 			<td>
-          {{item.list_.pressure}} hpa
+          {{item.list_}} hpa
 			</td>
 			<td>
-          {{item.list_.humidity}} %
+          {{item.list_}} %
 			</td>
 			<td>
-				  {{item.list_.weather.id }}
+				  {{item.list_ }}
 			</td>
 			<td>
-          {{item.list_.weather.main }}
+          {{item.list_ }}
 			</td>
 			<td >
-          {{item.list_.weather.description }}
+          {{item.list_ }}
 			</td>
 			<td>
-          {{item.list_.weather.icon }}
+          {{item.list_ }}
 			</td>
 			<td>
-          {{item.list_.speed}} meter/sec
+          {{item.list_}} meter/sec
 			</td>
 			<td>
-          {{item.list_.deg}} °
+          {{item.list_}} °
 			</td>
 			<td>
-          {{item.list_.clouds}} %
+          {{item.list_}} %
 			</td>
 			<td>
-				  {{item.list_.rain}}
+				  {{item.list_}}
 			</td>
-	    </tr>
+      </tr>
+
 </table>
 <br>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 46547fa2af817e507dff43ce2a5f33cebf42d81c..0d2deb4b6f8a44b209fc8b149dcfece1d69d7019 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { dataList } from './dataList.const';
 
+
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
@@ -10,6 +11,7 @@ export class HomeComponent implements OnInit {
 
   list = dataList;
 
+
   constructor() { }
 
   ngOnInit() {
diff --git a/src/app/p2/p2.component.html b/src/app/p2/p2.component.html
index 7bb7849a40114de854e035c91319fb213f9387f7..36019682907d3b03cffa39c94472be75f2deede9 100644
--- a/src/app/p2/p2.component.html
+++ b/src/app/p2/p2.component.html
@@ -1,4 +1,5 @@
 <p style="color:green">題二</p>
+<p>尚未將刪除功能做出、隱藏及加總功能也還沒，十分抱歉</p>
 <form (ngSubmit)="addData()">
 <p>
   單品：<input type="text" name="name" [(ngModel)]="name" ><br>
diff --git a/src/app/p2/p2.component.ts b/src/app/p2/p2.component.ts
index 17201c42c417a6adeb8934b66e71a396e7a5872e..da280f7d234f684e5e59e3429f3082e852ddd4b1 100644
--- a/src/app/p2/p2.component.ts
+++ b/src/app/p2/p2.component.ts
@@ -49,7 +49,6 @@ export class P2Component implements OnInit {
   }
 
     totalPrice(){
-      return '算不出來';
     }
 
     deleteItem(name): void {
diff --git a/src/app/p3/p3.component.html b/src/app/p3/p3.component.html
index 833a04a276a4eab8d28beb1958dc68db48025d01..d9014b26c78c5a790ff6ecb46e4d760c24df952f 100644
--- a/src/app/p3/p3.component.html
+++ b/src/app/p3/p3.component.html
@@ -1,5 +1,5 @@
 <p style="color:green">題三</p>
-
+<p>sorry</p>
   寬度 : <input type="number" min="1" ><br>
   高度 : <input type="number" min="1" ><br>
   <img [src]="imageUrl">
diff --git a/src/app/p4/p4-routing.module.ts b/src/app/p4/p4-routing.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ec62924f015fe2e1f3f3db0539720d7cec7d78a3
--- /dev/null
+++ b/src/app/p4/p4-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { P4Component } from './p4.component';
+
+const routes: Routes = [
+{
+  path: '',
+  component: P4Component
+}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class P4RoutingModule { }
diff --git a/src/app/p4/p4.component.css b/src/app/p4/p4.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/p4/p4.component.html b/src/app/p4/p4.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..aa03eb8e0a9c3d833dd2a1595c484bdb522b68ca
--- /dev/null
+++ b/src/app/p4/p4.component.html
@@ -0,0 +1,18 @@
+<h5>輸入欄位驗證</h5>
+<p>十分抱歉，不夠時間完成</p>
+
+<table border="2">
+  製作三個directive 輸入欄位驗證<br>
+  一.必須輸入大於０，若輸入小於或等於0，則alert訊息<br>
+  二.只能輸入數字，若輸入欄位不符，則alert訊息<br>
+  三.只能輸入英文兩碼＋數字三碼，若輸入欄位不符，則alert訊息</table>
+
+<br>
+  欄位一 : <input class="test"
+            placeholder="輸入看看"
+            autofocus
+            (keyup.enter)="addNumber($event.target)"
+            ><br><br>
+  欄位二 : <input class="number"><br><br>
+  欄位三 : <input class="number">
+  <router-outlet></router-outlet>
diff --git a/src/app/p4/p4.component.ts b/src/app/p4/p4.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b08bc54a911b4c59b84f64ccb00b57744679a6c9
--- /dev/null
+++ b/src/app/p4/p4.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-p4',
+  templateUrl: './p4.component.html',
+  styleUrls: ['./p4.component.css']
+})
+export class P4Component implements OnInit {
+
+  number = '';
+  value2: any;
+
+  addNumber(inputRef: HTMLInputElement): void {
+    console.log(inputRef.value);
+    inputRef.value = '';
+
+    inputRef.value = this.value2;
+
+    if (
+      this.value2 = 0
+    ) {
+      alert('good');
+    } else {
+    alert('請輸入0');
+    }
+  }
+
+
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/p4/p4.module.ts b/src/app/p4/p4.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6104f5033af18482dcc1eca9591e07cac07a6f8e
--- /dev/null
+++ b/src/app/p4/p4.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { P4RoutingModule } from './p4-routing.module';
+import { P4Component } from 'src/app/p4/p4.component';
+
+@NgModule({
+  declarations: [P4Component],
+  imports: [
+    CommonModule,
+    P4RoutingModule,
+    FormsModule
+  ]
+})
+export class P4Module { }