Question

显示所有卡片后，通过单击卡片，可以看到被点击的卡片，而其他卡片则不可见。我该怎么办？

selected.html

<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(x)" >
      <div>{{x.product_name}}</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>

selected.ts

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

 display(x){
    this.data.getSimilar().subscribe(data => {
    this.similar  = data;
  });
   for(var i=indexNumber; i< this.list.length; i++){
     if (i==indexNumber || i==indexNumber-1){
       this.list[i].visible=false;
    }
     else{
      this.list[i].visible=true;
    }
  }
}

Answer 1

html

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

  </div>
  <div (click)="resetIndex()">Reset SelecetedIndex</div>
</div>

组件

elist:object;
selectedIndex:number;
ngOninit{
    this.selectedIndex=null;
    this.data.getList().subscribe(data => {
      this.list  = data;
    });
 }
display(x){
   this.selectedIndex=x;
   console.log(x)
}
resetIndex(){
    this.selectedIndex=null;
}

因此默认情况下将显示每张卡，并且您可以重置所选索引。

Answer 2

我们可以使用布尔标志来显示和隐藏其他列表卡。在您的情况下，x.hidden = true或false。

app.component.ts

display(x){
    this.list.forEach((x) => x.hidden = !x.hidden);
    if(x) { x.hidden = false; }
  }

以及您的 app.component.html

<div class="row ">
  <div class=" col-md-3" *ngFor="let x of list; let i = index " style="padding:15px;" [hidden]="x.hidden">
     <div class="card ">
       <div class="card-body ">
      <img src="{{x.productImage}}" class=" rounded" (click)="display(x)" >
      <div>{{x.product_name}} {{i}}</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" (click)="display()" >
           <div>{{y.product_name}}</div>
         </div>
      </div>
     </div>
   </div>

并创建了一个小型应用：https://stackblitz.com/edit/angular-ngetz9

更新：只需将click事件绑定到第二行图像，就不传递任何内容。请找到display（）更新的代码

显示选定的索引隐藏角度6中的其他索引

2 个答案: