Question

我正在使用Firebase＆Angle 6从数据库中显示产品列表，但是我想在单击卡片时获取特定产品的数据，请帮助。代码如下：-

App.component.html

  <div class="card-group">
      <div class="card" (click)="getItems($event)" *ngFor="let item of items">
        <img class="card-img-top img-fluid " [src]="item.image"
          alt="Card image cap">
        <div class="card-body" >
          <h5 class="card-title">{{item.productTitle}}</h5>
          <p class="card-text">{{item.description}}</p>
          <h5 class="card-text">₹{{item.mrp}}</h5>
        </div>
      </div>
    </div>

App.component.ts

 import { Component,OnInit, } from '@angular/core';
    import * as firebase from "firebase";
    import 'firebase/firestore';

    @Component({
      selector: 'app-component',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.css']
    })


    export class AppComponent implements OnInit {


      public items = [];
      constructor() {
        this.loadProductData();
        let val = this.cardToDisplay;

      }
      getItems(event:any){
        let details=event.target.value;
              console.log(details);
      }

      loadProductData(){
       firebase.firestore().collection("Products").get().then((data) => {
       data.forEach((doc)=>{
        this.items.push(doc.data()) //Items pushed to array
   }) 
    })
      }
      ngOnInit() {

      }

    }

Answer 1

您可以尝试使用解决方案。

Component.html

<div class="card-group">
    <div class="card" *ngFor="let item of items" (click)="getItems(item)">
        <img class="card-img-top img-fluid " [src]="item.image" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">{{item.productTitle}}</h5>
            <p class="card-text">{{item.description}}</p>
            <h5 class="card-text">₹{{item.mrp}}</h5>
        </div>
    </div>
</div>

Component.ts

getItems(data){
    console.log(data);
}

使用Angular 6单击卡片时如何获取数据？

1 个答案: