by click show the previous cards and clicked card and hide the other index in angular 6

问题

By displaying all the cards, by clicking on the card clicked card and previous cards should be visible and other should be invisible.how could i do it?

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;
}

回答1:

just update your 2 files on stack blitz with the TS & HTML codes below... to disable the n+1 row for the list named "list", check my comment in the display function.

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/logo-nav@2x.png',     product_name: 'anguar', visible: true},
    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},
    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},
    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     product_name: 'anguar', visible: true},
    { productImage: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png',     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>

来源：https://stackoverflow.com/questions/53475003/by-click-show-the-previous-cards-and-clicked-card-and-hide-the-other-index-in-an