javascript - ERROR TypeError: Cannot read property 'name' of undefined when i try to add product

Question

I try to make a basket as simply as possible, I try to add a product to my basket but I have an error but I cannot find my error.

thank you

html

        <h2>Product</h2>
        <div class="card" *ngFor="let product of productList">
            <h1>{{product.name}}</h1>
            <p class="price">{{product.price | currency: 'USD'}}</p>
            <p><button (click)=add()>Add to Cart</button></p>
        </div>
    </div>
    <div>
        <h2>Total</h2>
        <div class="card">
            <table>
                <thead>
                    <tr>
                        <th>product</th>
                        <th>price</th>
                        <th>Quantity</th>
                        <th>total</th>
                    </tr>
                </thead>
                <tbody *ngFor="let added of productArray">
                    <tr>
                        <td>{{added.name}}</td>
                        <td>{{added.price}}</td>
                        <td>x 10</td>
                        <td>45€</td>

ts.file

 productList = [
    { name: 'Louis Vuis', price: 10 },
    { name: 'shubert helmet', price: 20 },
    { name: 'sport gloves', price: 30 }
  ];

  productArray: any = [];

  add(product) {
    this.productArray.push(product);
  }

Answer 1

In your template, you have to change (click)="add()" to (click)="add(product)"