通过单击显示以前的卡和单击的卡并隐藏角度6中的其他索引

Question

通过显示所有卡片，通过单击被点击的卡片，以前的卡片应该是可见的，其他卡片应该是不可见的。我该怎么办？

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

只需使用下面的TS和HTML代码更新堆栈闪电战中的2个文件...以禁用名为“ list”的列表的n + 1行，请在显示功能中检查我的评论。

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>