p2.component.ts

import { Component, OnInit } from '@angular/core';
import { Data } from './data';

@Component({
  selector: 'app-p2',
  templateUrl: './p2.component.html',
  styleUrls: ['./p2.component.css']
})
export class P2Component implements OnInit {

    name = '';

    price = '';

    quantity = '';

    datas: Data[] = [];

    result = 0;
    total = '';

    message = '';

    buildMessage(): void {
    if (this.name !== null && this.price !== null && this.quantity !== null &&
        this.name !== undefined && this.price !== undefined && this.quantity !== undefined
      ) {
        this.message = "你購買" + this.name + "商品，單價" + this.price + "元，數量"
        + this.quantity + "元，共計NT$";
        }

    }

    addData(): void {

   // 防呆，避免名稱或內容是空值時也可以留言
    if (
      !this.name.trim() && !this.price.trim() && !this.quantity.trim()
    ) {
      return alert('項目資訊沒填好');
    }
    // 用名稱跟內容產生一個留言的資料物件
    const data = new Data(this.name, this.price, this.quantity);

    // 將留言的資料物件放進容器裡
    this.datas.push(data);


  }

    totalPrice(){
    }

    deleteItem(name, i): void {
      console.log(name);
      this.datas.splice(i, 1);
    }

  constructor() { }

  ngOnInit() {
  }

}