下禮拜盡可能把它完成

src/app/app-path.const.ts

@@ -4,6 +4,8 @@ export const appPath = {
 
   p2: 'p2',
 
-  p3: 'p3'
+  p3: 'p3',
+
+  p4: 'p4'
 
 };

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'
   }
 ];
 

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>

src/app/app.module.ts

@@ -6,7 +6,7 @@ import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
   ],
   imports: [
     BrowserModule,

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,

src/app/home/home.component.html

 <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>

src/app/home/home.component.ts

 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() {

src/app/p2/p2.component.html

 <p style="color:green">題二</p>
+<p>尚未將刪除功能做出、隱藏及加總功能也還沒，十分抱歉</p>
 <form (ngSubmit)="addData()">
 <p>
   單品：<input type="text" name="name" [(ngModel)]="name" ><br>

src/app/p2/p2.component.ts

@@ -49,7 +49,6 @@ export class P2Component implements OnInit {
   }
 
     totalPrice(){
-      return '算不出來';
     }
 
     deleteItem(name): void {

src/app/p3/p3.component.html

 <p style="color:green">題三</p>
-
+<p>sorry</p>
   寬度 : <input type="number" min="1" ><br>
   高度 : <input type="number" min="1" ><br>
   <img [src]="imageUrl">

src/app/p4/p4-routing.module.ts

+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 { }

src/app/p4/p4.component.html

+<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>

src/app/p4/p4.component.ts

+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() {
+  }
+
+}

src/app/p4/p4.module.ts

+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 { }