p2.component.ts

import { Component, OnInit } from '@angular/core';
import { Message } from './message';

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

    name = '';

    price = '';

    quantity = '';

    messages: Message[] = [];

    result = 0;

    addMessage(): void {

   // 防呆，避免名稱或內容是空值時也可以留言
    if (
      !this.name.trim() && !this.price.trim() && !this.quantity.trim()
    ) {
      return;
    }
    // 用名稱跟內容產生一個留言的資料物件
    const message = new Message(this.name, this.price, this.quantity);
    // 將留言的資料物件放進容器裡
    this.messages.push(message);

  }
    deleteItem(): void {
      alert('清空啦');
    }

  constructor() { }

  ngOnInit() {
  }

}