update 題三

src/app/p3/p3.component.html

 <p style="color:green">題三</p>
 
-<!-- 圖片無法顯示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 ">
+
+  WidthLength : <input type="number" min="1" step="5" [(ngModel)]="widthLength" (change)="showPic()" ><br>
+  HeightLength : <input type="number" min="1" step="5" [(ngModel)]="heightLength" (change)="showPic()"><br>
+
+  <img [src]='imageUrl '/>
+
 
 <router-outlet></router-outlet>

src/app/p3/p3.component.ts

@@ -9,19 +9,21 @@ export class P3Component implements OnInit {
 
   widthLength = '1024';
   heightLength = '768';
-  imageUrl = 'http://lorempixel.com/{{widthLength}}/{{heightLength}}/';
+  imageUrl = null;
+
+  ngOnInit() {
+    this.showPic();
+  }
 
   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 = 'https://lorempixel.com/' + this.widthLength + '/' + this.heightLength + '/';
     } else {
-      alert('長度或高度不得為空!');
+      alert('null');
     }
   }
 
   constructor() { }
 
-  ngOnInit() { }
-
 }

src/app/p4/p4.component.ts

@@ -49,7 +49,7 @@ export class P4Component implements OnInit {
     if (
       this.value2 !== Number
     ) {
-      alert('只能輸入數字');
+      alert('欄位只能輸入英文兩碼 + 數字三碼');
     } else {
     alert('輸入正確');
     }