Question

伙计们，我正在尝试建立一个电子商务项目，所以我被困在某个地方，我的所有产品都以Bootstrap Card的形式显示。

现在我要单击“添加到购物车”按钮，我要呈现该特定卡并将其添加到购物车按钮更新为“ 1件购物车” 为避免混淆，预期结果显示在下面的链接中

这是卡的组成部分

<div class=" row justify-content-md-center">
<div class="col-md-3 describe" *ngFor="let p of filteredproducts ;let 
i=index">
<mdb-card class="mdb">
<mdb-card-img src="{{p.imageurl}}" alt="Card image cap"></mdb-card-img>
<mdb-card-body>
  <mdb-card-title>
    <h4>{{p.title}}</h4>
  </mdb-card-title>
  <mdb-card-text> {{p.price}}
  </mdb-card-text>
 <div>


   <button class="button" id="btn" (click)="onclick(p,i)" mdbBtn 
type="button" color="primary" block="true" mdbWavesEffect>Add to 
Cart</button>

</div>
</mdb-card-body>
</mdb-card>
</div>
</div>

.ts文件

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Productservice } from '../shared/product.service';

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

allproducts:any[]=[]
category
filteredproducts:any[]=[]
selected
param1: string;
constructor(private route:ActivatedRoute,private router:Router,private 
prservice:Productservice) {
this.route.queryParams.subscribe(params => {
  this.param1 = params['category'];

  this.allproducts=this.prservice.getallproducts()


  this.filteredproducts=(this.param1)?
  this.allproducts.filter(p=>p.select===this.param1):this.allproducts
 }); 
 }

 ngOnInit() {
  // console.log(id)
 }

onclick(p,i){

  console.log(p,i)


}


}

Answer 1

实施起来太简单了。

<div class=" row justify-content-md-center">
<div class="col-md-3 describe" *ngFor="let p of filteredproducts ;let 
i=index">
<mdb-card class="mdb">
<mdb-card-img src="{{p.imageurl}}" alt="Card image cap"></mdb-card-img>
<mdb-card-body>
<mdb-card-title>
<h4>{{p.title}}</h4>
</mdb-card-title>
<mdb-card-text> {{p.price}}
</mdb-card-text>
<div>


  <button class="button" id="btn" (click)="onclick(p,i)" mdbBtn 
 type="button" color="primary" block="true" mdbWavesEffect>Add to 
Cart</button>

   /* customize as you want to show when a product added to cart.
    simply add two buttons plus and negative and in between of them add span 
   that will represent how much items are in the cart and use `*ngIf` to hide 
   and show when a product is in a cart or not respectively */

</div>
</mdb-card-body>
</mdb-card>
</div>
</div>

角度编辑选定的卡片

1 个答案: