刪除、加總 & 清空所有項目 done

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">
@@ -60,7 +53,7 @@ cnt:<input type="number" min="1" max="7"><br>
       <th>icon</th>
   </tr>
 
-  <!-- TODO  -->
+  <!-- TODO  尚欠icon-->
 
   <tbody *ngFor = "let l of list">
       <tr *ngFor = "let item of l.list_">
@@ -100,8 +93,8 @@ cnt:<input type="number" min="1" max="7"><br>
           <td *ngFor = "let item2 of item.weather">
               {{ item2.description }}
           </td>
-          <td >
-              {{item }}
+          <td>
+              {{ pic }}
           </td>
           <td>
               {{ item.speed }} meter/sec

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',
@@ -11,6 +10,7 @@ export class HomeComponent implements OnInit {
 
   list = dataList;
 
+  pic = Image['./01d.png'];
 
   constructor() { }
 

src/app/p2/data.ts

@@ -3,14 +3,14 @@ export class Data {
     name: string;
     price: any;
     quantity: any;
-
+    total: any;
 
     constructor(name: string, price: any, quantity: any) {
 
         this.name = name;
         this.price = price;
         this.quantity = quantity;
-
+        this.total = price * quantity;
 
       }
 

src/app/p2/p2.component.html

 <p style="color:green">題二</p>
-<p>尚未將隱藏及加總功能也還沒</p>
+<p>尚餘隱藏功能</p>
 <form (ngSubmit)="addData()">
-<p>
-  單品：<input type="text" name="name" [(ngModel)]="name" ><br>
-  單價：<input type="number" name="price" min="1" [(ngModel)]="price"><br>
-  數量：<input type="number" name="quantity" min="1" [(ngModel)]="quantity"><br>
+<!-- ToDo 隱藏字句（下方[hidden]，設name == null 依舊會display） -->
+
+  單品：<input type="text" name="name" [(ngModel)]="name" (change)="bulidMessage()" ><br>
+  單價：<input type="number" name="price" min="1" [(ngModel)]="price" (change)="bulidMessage()"><br>
+  數量：<input type="number" name="quantity" min="1" [(ngModel)]="quantity" (change)="bulidMessage()"><br>
+
+  <p [hidden]="name == 0">
   你購買 {{ name }} 商品，單價 {{ price }} 元，數量{{ quantity }}元，共計NT${{ price * quantity}} 元
-</p>
+  {{ message }}
+  </p>
   <button type="submit" class="btn btn-space">新增項目</button>
-  <button type="reset">清空所有項目</button>
+  <!-- <button type="reset" (click)="cleanItem()">清空所有項目</button> -->
 </form>
+<button (click)="cleanItem(name, i)">清空所有項目</button>
 
 <table border="1" >
   <tr>
@@ -26,10 +31,10 @@
     <td>{{ data.name }}</td>
     <td>{{ data.price }}</td>
     <td>{{ data.quantity }}</td>
-    <td>{{ data.price * data.quantity}}</td>
+    <td>{{ data.total }}</td>
   </tr>
 </ng-container>
-  <tr>
+  <tr [hidden]="datas.length ==0">
     <td colspan="4" align="right">加總</td>
     <td>{{ totalPrice() }}</td>
   </tr>

src/app/p2/p2.component.ts

@@ -16,19 +16,19 @@ export class P2Component implements OnInit {
 
     datas: Data[] = [];
 
-    result = 0;
-    total = '';
+    // result = 0;
+    total: any;
 
     message = '';
 
+
     buildMessage(): void {
     if (this.name !== null && this.price !== null && this.quantity !== null &&
         this.name !== undefined && this.price !== undefined && this.quantity !== undefined
       ) {
-        this.message = "你購買" + this.name + "商品，單價" + this.price + "元，數量"
-        + this.quantity + "元，共計NT$";
+        this.message = '你購買' + this.name + '商品，單價' + this.price + '元，數量'
+        + this.quantity + '元，共計NT$';
         }
-
     }
 
     addData(): void {
@@ -48,7 +48,14 @@ export class P2Component implements OnInit {
 
   }
 
-    totalPrice(){
+    totalPrice(): void {
+      const result = 0;
+      for (
+        const i = 0; i < this.datas.length; i++
+      ) { const data = this.datas[i];
+        result = result + data.total;
+      }
+      return result;
     }
 
     deleteItem(name, i): void {
@@ -56,6 +63,11 @@ export class P2Component implements OnInit {
       this.datas.splice(i, 1);
     }
 
+    cleanItem(name, i): void {
+      console.log(name);
+      this.datas.splice(i)
+    }
+
   constructor() { }
 
   ngOnInit() {

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.component.html

 <h5>輸入欄位驗證</h5>
-<p>十分抱歉，不夠時間完成</p>
 
 <table border="2">
   製作三個directive 輸入欄位驗證<br>
@@ -9,13 +8,16 @@
 
 <br>
   欄位一 : <input class="test"
-            placeholder="輸入看看"
+            placeholder="輸入後請按enter"
             autofocus
             (keyup.enter)="addNumber($event.target)"
             ><br><br>
   欄位二 : <input class="number"
-            placeholder="輸入看看"
+            placeholder="輸入後請按enter"
+            autofocus
+            (keyup.enter)="addNumber2($event.target)"><br><br>
+  欄位三 : <input class="number"
+            placeholder="輸入後請按enter"
             autofocus
             (keyup.enter)="addNumber2($event.target)"><br><br>
-  欄位三 : <input class="number">
   <router-outlet></router-outlet>

src/app/p4/p4.component.ts

@@ -29,10 +29,10 @@ export class P4Component implements OnInit {
     console.log(inputRef.value);
     inputRef.value = '';
 
-    inputRef.value = this.value2;
+    this.value2 = new Number(inputRef.value);
 
     if (
-      this.value2 !== 'number'
+      this.value2 !== Number
     ) {
       alert('bye');
     } else {