app.component.html

<form (ngSubmit)="addMessage()">
<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>
  你購買 {{ name }} 商品，單價 {{ price }} 元，數量{{ quantity }}元，共計NT${{ price * quantity}} 元
</p>
  <button type="submit" class="btn btn-space">新增項目</button>
  <button type="reset">清空所有項目</button>
</form>

<table border="1" >
  <tr>
    <th>動作</th>
    <th>商品名稱</th>
    <th>商品價格</th>
    <th>購買數量</th>
    <th>小計</th>
  </tr>
  <!-- 清單 -->
  <ng-container *ngFor="let message of messages; let i = index">
  <tr>
    <td><button (click)="deleteItem(item)">刪除</button></td>
    <td>{{ message.name }}</td>
    <td>{{ message.price }}</td>
    <td>{{ message.quantity }}</td>
    <td>{{ message.price * message.quantity}}</td>
  </tr>
</ng-container>
  <tr>
    <td colspan="4" align="right">加總</td>
    <td>{{total}}</td>
  </tr>
</table>