Question

这是cart-details组件html文件，我试图在该文件上循环从我的cart-details组件ts文件已订阅的cart服务接收的项目。我试图遍历所有项目，得到的错误是它无法与ng for loop绑定。请帮忙！

<div class="main-content">
   <div class="section-content section-content-p30">
       <div class="container-fluid">

           <table class="table table-bordered">
               <tr>
                   <th width="20%">Product Image</th>
                   <th width="50%">Product Detail</th>
                   <th width="30%"></th>
               </tr>

               <tr *ngFor="let tempCartItem of cartItems">
                   <td>
                       <img src="{{ tempCartItem.imageUrl }}" class="img-responsive" width="150px" />
                   </td>
                   <td>
                       <p>{{ tempCartItem.name }}</p>
                       <p>{{ tempCartItem.unitPrice  }}</p>
                   </td>
                   <td>
                       <div class="items">
                           <label>Quantity:</label> {{ tempCartItem.quantity }}
                       </div>

                       <p class="mt-2">Subtotal: {{ tempCartItem.quantity *  tempCartItem.unitPrice  }}</p>
                   </td>
               </tr>

               <tr >
                   <td colspan="2"></td>
                   <td style="font-weight: bold">
                       <p>Total Quantity: {{ totalQuantity }}</p>
                       <p>Shipping: FREE</p>
                       <p>Total Price: {{ totalPrice  }}</p>
                   </td>
               </tr>

           </table>

       </div>
   </div>
</div>

Answer 1

NgFor是位于CommonModule中的结构化指令。

请导入CommonModule，并将其添加到您正在使用NgFor的模块的imports数组中。

此外，您在代码中使用ngFor。

确定要获得Can't bind to ngForOf error ?

Core.js 12799：无法绑定到“ ngForOf”，因为它不是“ tr”的已知属性

1 个答案: