问题描述
限时送ChatGPT账号..通过显示所有卡片,通过点击卡片点击卡片,以前的卡片应该是可见的,其他的应该是不可见的.我该怎么做?
appponent.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>
appponent.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: './appponent.html',styleUrls: ['./appponent.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/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', 可见: true},{ productImage: 'https://encrypted-tbn0.gstatic/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', 可见: true},{ productImage: 'https://encrypted-tbn0.gstatic/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', 可见: true},{ productImage: 'https://encrypted-tbn0.gstatic/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', 可见: true},{ productImage: 'https://encrypted-tbn0.gstatic/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?
appponent.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>
appponent.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: './appponent.html',
styleUrls: [ './appponent.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/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true},
{ productImage: 'https://encrypted-tbn0.gstatic/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true},
{ productImage: 'https://encrypted-tbn0.gstatic/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true},
{ productImage: 'https://encrypted-tbn0.gstatic/images?q=tbn:ANd9GcTZzXqymcb9NZkoJVW9HImoOKbYFfinBRvk8yNWVnCzlqD-fl_h', product_name: 'anguar6', visible: true},
{ productImage: 'https://encrypted-tbn0.gstatic/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屋!
更多推荐
[db:关键词]
发布评论