在控制台中检索 id

Question

大家好，我为每个引导卡分配了 ID，当我在 html 组件中渲染它时，它会正确渲染，但我如何在控制台中检索它？意味着单击“添加到购物车”按钮时，我想将其传递给 .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)
}