no message

src/app/app.component.html

@@ -3,10 +3,10 @@
   單品：<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>
+  你購買 {{ name }} 商品，單價 {{ price }} 元，數量{{ quantity }}元，共計NT${{ price * quantity}} 元
 </p>
-{{message}}
   <button type="submit" class="btn btn-space">新增項目</button>
-  <button type="reset" ng-click=" remove()">清空所有項目</button>
+  <button type="reset">清空所有項目</button>
 </form>
 
 <table border="1" >
@@ -18,9 +18,9 @@
     <th>小計</th>
   </tr>
   <!-- 清單 -->
-  <ng-container *ngFor="let message of messages">
+  <ng-container *ngFor="let message of messages; let i = index">
   <tr>
-    <td><button type="reset">刪除</button></td>
+    <td><button (click)="deleteItem(item)">刪除</button></td>
     <td>{{ message.name }}</td>
     <td>{{ message.price }}</td>
     <td>{{ message.quantity }}</td>
@@ -29,14 +29,7 @@
 </ng-container>
   <tr>
     <td colspan="4" align="right">加總</td>
-    <td></td>
+    <td>{{total}}</td>
   </tr>
 </table>
-<!-- <ng-container *ngFor="let message of messages">
-
-<p>商品名稱：{{ message.name }}</p>
-<p>商品價格：{{ message.price }}</p>
-<p>購物數量：{{ message.quantity }}</p>
-<p>小計：{{ message.price * message.quantity}}</p>
-</ng-container> -->
 

src/app/app.component.ts

@@ -16,33 +16,23 @@ export class AppComponent {
 
   messages: Message[] = [];
 
+  result = 0;
+
   addMessage(): void {
 
  // 防呆，避免名稱或內容是空值時也可以留言
   if (
-    !this.name.trim() && !this.messages.trim() && !this.quantity.trim()
+    !this.name.trim() && !this.price.trim() && !this.quantity.trim()
   ) {
     return;
   }
-
   // 用名稱跟內容產生一個留言的資料物件
   const message = new Message(this.name, this.price, this.quantity);
-
   // 將留言的資料物件放進容器裡
   this.messages.push(message);
 
 }
-
-  total():void {
+  deleteItem(): void {
+    alert('清空啦');
   }
-
-  buildMessage(): void {
-
-  }
-
-  remove(): void {
-    this.messages.remove(new Message);
-  }
-
-
 }