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

Question

通过显示所有卡片，通过点击卡片点击卡片和之前的卡片应该是可见的，其他应该是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

只需使用下面的 TS 和 HTML 代码更新 stack blitz 上的 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>

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

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

visibility

angular