Question

在初始化时，我将显示第一个div，然后单击第一个div卡，第二个div卡应显示在位置index + 1中，就像在第一个div上单击哪个卡一样，显示第二个div卡点击的卡片旁边。如何操作？

app.component.html

1st div
<div class="row ">
  <div class=" col-md-3" *ngFor="let x of list; let i = index " style="padding:15px;">
    <div class="card ">
      <div class="card-body ">
       <img src="{{x.productImage}}" class=" rounded" (click)="display(i)" >
       <div>{{x.product_name}}</div>
      </div>
    </div>
  </div>
</div>
/*2nd div*/
<div class="row ">
  <div class=" col-md-3" *ngFor="let y of similar; let i = index " style="padding:15px;">
    <div class="card ">
     <div class="card-body " >
       <img src="{{y.productImage}}" class=" rounded"  >
       <div>{{y.product_name}}</div>
     </div>
    </div>
  </div>
</div>

app.component.ts

 list: any;
 similar: any;

 ngOninit {
    this.data.getList().subscribe(data => {
       this.list = data;
    });
 }

 display(x,index) {
    this.data.getSimilar(x.productid).subscribe(data => {
       this.similar = data;
    });
 }

data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';
@Injectable({
    providedIn: 'root'
})
export class DataService { 
    API_URL = 'http://testsite.com/';
    getList() {
      return  this.httpClient.get(`${this.API_URL +  'getList?page=1&user=10&count=10'  }`);
   }
    getSimilar(prodid) {
      return  this.httpClient.get(`${this.API_URL +  'getSim?product='+prodid+'&user=10&count=6'  }`);
   }
}

Answer 1

可能还差得远，但是假设您的api服务正常工作，我看到的唯一问题是：您的click事件需要产品和索引，但是您只传递了索引。

为什么从不使用索引时display(x,index)？并且在进行(click)="display(i)时，您甚至没有传递对象。应该是(click)="display(x)，然后是display(x){}

单击该卡，调用角度6中被单击产品旁边的另一个API产品。

1 个答案: