通过点击显示前卡并单击卡，并隐藏在角6其他指标(by click show the previous

通过显示所有的牌，通过点击卡上单击卡和以前的卡应该是看得见的，其他应该是我invisible.how能做到这一点？

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>
</div>
</div>

app.component.ts

list:object;
ngOninit{
  this.data.getList().subscribe(data => {
  this.list  = data;
});
display(x){
  this.list.forEach((x) => x.hidden = true);
  x.hidden = false;
}

Answer 1:

刚刚更新下面...禁用N + 1列名为“清单”列表中的TS＆HTML代码堆栈热捧的2个文件，检查我在显示功能注释。

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { list:any[] = [ { productImage: 'https://angular.io/assets/images/logos/angular/[e-mail]', product_name: 'anguar', visible: true}, { productImage: 'https://angular.io/assets/images/logos/angular/[e-mail]', product_name: 'anguar', visible: true}, { productImage: 'https://angular.io/assets/images/logos/angular/[e-mail]', product_name: 'anguar', visible: true}, { productImage: 'https://angular.io/assets/images/logos/angular/[e-mail]', product_name: 'anguar', visible: true}, { productImage: 'https://angular.io/assets/images/logos/angular/[e-mail]', product_name: 'anguar', visible: true}, ] similar:any[] = [ { productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true}, { productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true}, { productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true}, { productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true}, { productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true}, ] display(indexNumber){ console.log("inside display for:"+indexNumber); for(var i=0; i< this.list.length; i++){ if (i==indexNumber || i==indexNumber-1 /* comment the line below to hide n+1 item to display */ || i==indexNumber+1 /* comment the line above to hide n+1 item to display */ ){ this.list[i].visible=true; } else{ this.list[i].visible=false; } } for(var i=0; i< this.similar.length; i++){ if (i==indexNumber+1){ this.similar[i].visible=true; } else{ this.similar[i].visible=false; } } /* this.list.forEach((x) => x.hidden = true); x.hidden = false; */ } } 

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

文章来源: by click show the previous cards and clicked card and hide the other index in angular 6