Question

伙计们，我为每个引导卡分配了ID，当我在html组件中呈现该ID时，它可以正确呈现，但是如何在控制台中获取它呢？意味着单击“添加到购物车”按钮时，我要将其传递到.component.ts文件..我该怎么做？

html组件

<div class=" row justify-content-md-center">
<div class="col-md-3 describe" *ngFor="let p of filteredproducts 
;let i=index">  ///here i assigned the id
 <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>
<div *ngIf="counter==0">
   <button class="button" id="btn" (click)="onclick()" åmdbBtn 
 type="button" color="primary" block="true" mdbWavesEffect>Add to 
 Cart</button>
 </div>
 <div *ngIf="counter>0">

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

.component.ts文件

export class HomeComponent implements OnInit {
counter=0

constructor(private route:ActivatedRoute,private 
router:Router,private prservice:Productservice) {


ngOnInit() {

}

onclick(){
this.counter++
console.log(this.counter)
}


}

在这里我需要获取ID

Answer 1

将其作为参数单击以传递功能。

 (click)="onclick(i)" 

onclick(i: string){
  this.counter++
  console.log(i)
}

Answer 2

您可以传递产品及其属性本身，因为将来可能会帮助获得产品的许多属性，而不仅仅是id。但是在这里，您需要的时候我都通过了。

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

ts文件

onclick(product,index){
this.counter++
console.log(this.counter)
}

在控制台中检索ID

2 个答案: