練習二 almost done

src/app/home/home.component.html

@@ -53,7 +53,7 @@ cnt:<input type="number" min="1" max="7"><br>
       <th>icon</th>
   </tr>
 
-  <!-- TODO  尚欠icon-->
+  <!-- TODO  尚欠icon display-->
 
   <tbody *ngFor = "let l of list">
       <tr *ngFor = "let item of l.list_">
@@ -94,7 +94,7 @@ cnt:<input type="number" min="1" max="7"><br>
               {{ item2.description }}
           </td>
           <td>
-              {{ pic }}
+              <img [src]="pic">
           </td>
           <td>
               {{ item.speed }} meter/sec
@@ -113,7 +113,7 @@ cnt:<input type="number" min="1" max="7"><br>
 
 
   </tbody>
-  <!-- <tr *ngFor = "let item of list[0].list_">
+  <!--<tr *ngFor = "let item of list[0].list_">
       <td>
           {{item | json }}
 			</td>

src/app/home/home.component.ts

@@ -10,7 +10,7 @@ export class HomeComponent implements OnInit {
 
   list = dataList;
 
-  pic = Image['./01d.png'];
+  pic = './01d.png';
 
   constructor() { }
 

src/app/p2/p2.component.html

 <p style="color:green">題二</p>
-<p>尚餘隱藏功能</p>
 <form (ngSubmit)="addData()">
-<!-- ToDo 隱藏字句（下方[hidden]，設name == null 依舊會display） -->
+<!-- ToDo 隱藏字句
+  問題1、（下方[hidden]，設name == null 依舊會display）
+  問題2、在component.ts設定的buildMessage之訊息無法秀出
+-->
 
   單品：<input type="text" name="name" [(ngModel)]="name" (change)="bulidMessage()" ><br>
   單價：<input type="number" name="price" min="1" [(ngModel)]="price" (change)="bulidMessage()"><br>

src/app/p3/p3.component.html

 <p style="color:green">題三</p>
 
-  寬度 : <input type="number" min="1" ><br>
-  高度 : <input type="number" min="1" ><br>
-  <img [src]="imageUrl">
+<!-- 圖片無法顯示QQ -->
+  寬度 : <input type="number" min="1" step="5" ><br>
+  高度 : <input type="number" min="1" step="5"><br>
+  <img src ="imageUrl">
+  <img [src]=" imageUrl ">
+  <img bind-src="imageUrl ">
+
 <router-outlet></router-outlet>

src/app/p3/p3.component.ts

@@ -9,14 +9,14 @@ export class P3Component implements OnInit {
 
   widthLength = '1024';
   heightLength = '768';
-  imageUrl = 'http://lorempixel.com//{{widthLength}}/{{heightLength}}/';
+  imageUrl = 'http://lorempixel.com/{{widthLength}}/{{heightLength}}/';
 
   showPic() {
     if (this.widthLength !== null && this.heightLength !== null &&
       this.widthLength !== undefined && this.heightLength !== undefined) {
-      this.imageUrl = "http://lorempixel.com/" + this.widthLength + "/" + this.heightLength + "/";
+      this.imageUrl = 'http://lorempixel.com/' + this.widthLength + '/' + this.heightLength + '/';
     } else {
-      alert("長度或高度不得為空!");
+      alert('長度或高度不得為空!');
     }
   }
 

src/app/p4/p4.component.html

@@ -5,7 +5,7 @@
   一.必須輸入大於０，若輸入小於或等於0，則alert訊息<br>
   二.只能輸入數字，若輸入欄位不符，則alert訊息<br>
   三.只能輸入英文兩碼＋數字三碼，若輸入欄位不符，則alert訊息</table>
-
+<!-- TODO 卡在ts檔的if else語法-->
 <br>
   欄位一 : <input class="test"
             placeholder="輸入後請按enter"

src/app/p4/p4.component.ts

@@ -17,11 +17,11 @@ export class P4Component implements OnInit {
     this.value2 = new Number(inputRef.value);
 
     if (
-      this.value2 === 0
+      this.value2 > 0
     ) {
-      alert('good');
+      alert('輸入正確');
     } else {
-    alert('請輸入0');
+    alert('請輸入大於0的數字');
     }
   }
 
@@ -34,12 +34,26 @@ export class P4Component implements OnInit {
     if (
       this.value2 !== Number
     ) {
-      alert('bye');
+      alert('只能輸入數字');
     } else {
-    alert('okay~');
+    alert('輸入正確');
     }
   }
 
+  addNumber3(inputRef: HTMLInputElement): void {
+    console.log(inputRef.value);
+    inputRef.value = '';
+
+    this.value2 = new Number(inputRef.value);
+
+    if (
+      this.value2 !== Number
+    ) {
+      alert('只能輸入數字');
+    } else {
+    alert('輸入正確');
+    }
+  }
 
 
   constructor() { }