有几张卡片。每张卡片都有一个“查看评论”按钮。我想打开“单击查看评论”的特定卡片的卡片页脚。现在，点击“查看评论”即可打开所有卡片。
export class MenuComponent implements OnInit {
public hideComments: boolean;
dishes: Dish[] = [
{
name: 'Uthappizza',
image: '/assets/img/Utthapizza.jpg',
category: 'mains',
label: 'Hot',
price: '4.99',
// tslint:disable-next-line:max-line-length
description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
rating: 5,
comment: 'Imagine all the eatables, living in conFusion!',
author: 'John Lemon',
date: '2012-10-16T17:57:28.556094Z'
},
{
rating: 4,
comment: 'Sends anyone to heaven, I wish I could get my mother-in-law to eat it!',
author: 'Paul McVites',
date: '2014-09-05T17:57:28.556094Z'
},
{
rating: 3,
comment: 'Eat it, just eat it!',
author: 'Michael Jaikishan',
date: '2015-02-13T17:57:28.556094Z'
},
{
rating: 4,
comment: 'Ultimate, Reaching for the stars!',
author: 'Ringo Starry',
date: '2013-12-02T17:57:28.556094Z'
},
{
rating: 2,
comment: 'It\'s your birthday, we\'re gonna party!',
author: '25 Cent',
date: '2011-12-02T17:57:28.556094Z'
}
]
},
{
name: 'Zucchipakoda',
image: '/assets/img/Zucchipakoda.JPG',
category: 'appetizer',
label: '',
price: '1.99',
description: 'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
comments: [
{
rating: 4,
comment: 'Imagine all the eatables, living in conFusion!',
author: 'John Lemon',
date: '2012-10-16T17:57:28.556094Z'
},
{
rating: 5,
comment: 'Sends anyone to heaven, I wish I could get my mother-in-law to eat it!',
author: 'Paul McVites',
date: '2014-09-05T17:57:28.556094Z'
},
{
rating: 3,
comment: 'Eat it, just eat it!',
author: 'Michael Jaikishan',
date: '2015-02-13T17:57:28.556094Z'
},
{
rating: 4,
comment: 'Ultimate, Reaching for the stars!',
author: 'Ringo Starry',
date: '2013-12-02T17:57:28.556094Z'
},
{
rating: 1,
comment: 'It\'s your birthday, we\'re gonna party!',
author: '25 Cent',
date: '2011-12-02T17:57:28.556094Z'
}
]
},
{
name: 'Vadonut',
image: '/assets/img/Vadonut.jpg',
category: 'appetizer',
label: 'New',
price: '1.99',
description: 'A quintessential ConFusion experience, is it a vada or is it a donut?',
comments: [
{
rating: 1,
comment: 'Imagine all the eatables, living in conFusion!',
author: 'John Lemon',
date: '2012-10-16T17:57:28.556094Z'
},
{
rating: 2,
comment: 'Sends anyone to heaven, I wish I could get my mother-in-law to eat it!',
author: 'Paul McVites',
date: '2014-09-05T17:57:28.556094Z'
},
{
rating: 3,
comment: 'Eat it, just eat it!',
author: 'Michael Jaikishan',
date: '2015-02-13T17:57:28.556094Z'
},
{
rating: 4,
comment: 'Ultimate, Reaching for the stars!',
author: 'Ringo Starry',
date: '2013-12-02T17:57:28.556094Z'
},
{
rating: 2,
comment: 'It\'s your birthday, we\'re gonna party!',
author: '25 Cent',
date: '2011-12-02T17:57:28.556094Z'
}
]
},
{
name: 'ElaiCheese Cake',
image: '/assets/img/ElaiCheese.jpg',
category: 'dessert',
label: '',
price: '2.99',
description: 'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
comments: [
{
rating: 5,
comment: 'Imagine all the eatables, living in conFusion!',
author: 'John Lemon',
date: '2012-10-16T17:57:28.556094Z'
},
{
rating: 4,
comment: 'Sends anyone to heaven, I wish I could get my mother-in-law to eat it!',
author: 'Paul McVites',
date: '2014-09-05T17:57:28.556094Z'
},
{
rating: 3,
comment: 'Eat it, just eat it!',
author: 'Michael Jaikishan',
date: '2015-02-13T17:57:28.556094Z'
},
{
rating: 4,
comment: 'Ultimate, Reaching for the stars!',
author: 'Ringo Starry',
date: '2013-12-02T17:57:28.556094Z'
},
{
rating: 2,
comment: 'It\'s your birthday, we\'re gonna party!',
author: '25 Cent',
date: '2011-12-02T17:57:28.556094Z'
}
]
}
];
public toggleComments(event){
console.log(event.target)
this.hideComments = !this.hideComments;
}
constructor() {
}
ngOnInit() {
this.hideComments = false;
}
}
<div class="container-fluid p-5">
<div class="row">
<h3 style="color: black"><span style="border-bottom: 2px solid grey">Menu</span></h3>
</div>
<div class="row mt-4">
<div class="col-md-3" *ngFor="let dish of dishes">
<div class="card shadow" style="height: 100%">
<img src="{{dish.image}}" class="card-img-top" style="height: 300px">
<div class="card-body">
<div class="dish-info" style="height: 150px">
<h5 class="card-title">{{dish.name}}</h5>
<p class="card-text">{{dish.description}}</p>
</div>
<small class="float-right" [hidden]="!!this.hideComments" (click)="toggleComments($event)">View Comments...</small>
<small class="float-right" [hidden]="!this.hideComments" (click)="toggleComments($event)">Close Comments...</small>
</div>
<div class="card-footer" [hidden]="!this.hideComments" style="height: 200px; overflow: scroll">
<div *ngFor="let comment of dish.comments">
<div class="media">
<img src="assets/img/user.png" class="mr-2" style="height: 35px; width: 40px">
<div class="media-body">
<h6 class="mt-0">{{comment.author}}</h6>
<p style="font-size: 12px; color:#21252991">{{comment.comment}}</p>
<small class="float-left" style="color: #6b8096">{{comment.date | date}}</small>
<small class="float-right" style="color: #6b8096">Rating: {{comment.rating}}/5</small>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
仅限“点击查看评论按钮”的特定卡片。现在，当我单击“查看评论”时，所有卡片页脚都会打开。
最佳答案
由于所有卡片共享相同的状态(hideComments，这是单个值)，因此当您单击特定卡片时，所有卡片都会打开和关闭。如果你想让一张卡片有自己的状态，你应该使用dishes索引:
...
<div class="col-md-3" *ngFor="let dish of dishes; let i=index">
...
然后，您可以在 toggleComments 方法中使用索引，该方法由点击特定卡片操作触发。当然 hideComments 应该是 boolean 数组。
关于javascript - 如何在 Angular 中切换卡片页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54062825/