通过单击显示以前的卡片和单击的卡片并隐藏角度 6 中的其他索引 [英] by click show the previous cards and clicked card and hide the other index in angular 6

查看：22
本文介绍了通过单击显示以前的卡片和单击的卡片并隐藏角度 6 中的其他索引的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

通过显示所有卡片，通过点击卡片点击卡片，以前的卡片应该是可见的，其他的应该是不可见的.我该怎么做?

app.component.html

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

app.component.ts

list:object;ngOninit{this.data.getList().subscribe(data => {this.list = 数据；});显示(x){this.list.forEach((x) => x.hidden = true);x.隐藏=假；}

解决方案

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

import { Component } from '@angular/core';@成分({选择器:'我的应用'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {列表:任何[] = [{ 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},]类似:任何[] = [{ productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', 可见: true},{ productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', 可见: true},{ productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', 可见: true},{ productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', 可见: true},{ productImage: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', 可见: true},]显示(索引号){console.log("内部显示为:"+indexNumber);for(var i=0; i< this.list.length; i++){if (i==indexNumber || i==indexNumber-1/* 注释下面的行以隐藏要显示的 n+1 项 */||i==索引号+1/* 注释上面的行以隐藏要显示的 n+1 项 */){this.list[i].visible=true;}别的{this.list[i].visible=false;}}for(var i=0; i x.hidden = true);x.隐藏=假；*/}}

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

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

解决方案

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>

这篇关于通过单击显示以前的卡片和单击的卡片并隐藏角度 6 中的其他索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆