javascript - 错误类型错误：当我尝试添加产品时无法读取未定义的属性“名称”

Question

我尝试尽可能简单地制作一个篮子，我尝试将产品添加到我的篮子中，但我有一个错误，但我找不到我的错误。

谢谢你

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€&lt;/td>

ts.文件

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

  productArray: any = [];

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

标签： javascriptangulartypescript

Answer 1

在您的模板中，您必须更改(click)="add()"为(click)="add(product)"