p2.component.html

<p style="color:green">題二</p>
<form (ngSubmit)="addData()">
<!-- 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>
  數量：<input type="number" name="quantity" min="1" [(ngModel)]="quantity" (change)="bulidMessage()"><br>

  <p [hidden]="name == 0">
  你購買 {{ name }} 商品，單價 {{ price }} 元，數量{{ quantity }}元，共計NT${{ price * quantity}} 元
  {{ message }}
  </p>
  <button type="submit" class="btn btn-space">新增項目</button>
  <!-- <button type="reset" (click)="cleanItem()">清空所有項目</button> -->
</form>
<button (click)="cleanItem(name, i)">清空所有項目</button>

<table border="1" >
  <tr>
    <th>動作</th>
    <th>商品名稱</th>
    <th>商品價格</th>
    <th>購買數量</th>
    <th>小計</th>
  </tr>
  <!-- 清單 -->
  <ng-container *ngFor="let data of datas; let i = index">
  <tr>
    <td><button (click)="deleteItem(data, i)">刪除</button></td>
    <td>{{ data.name }}</td>
    <td>{{ data.price }}</td>
    <td>{{ data.quantity }}</td>
    <td>{{ data.total }}</td>
  </tr>
</ng-container>
  <tr [hidden]="datas.length ==0">
    <td colspan="4" align="right">加總</td>
    <td>{{ totalPrice() }}</td>
  </tr>
</table>
<br>
<router-outlet></router-outlet>