angular - Mat-icon:当按下一个按钮时,所有的图标都会改变
问题描述
我正在使用 Mat-card 使用数组和 *ngFor 显示列表,当按下按钮时,它只会更改所选卡上的图标(mat-icon),但它会更改列表中的所有按钮。
这是一个例子:
但是当我按下它时,所有的图标都会改变。
这是我的代码:
<mat-card *ngFor="let a of items ;let i = index" class="item-card mat-card">
<mat-card-header class="card-mat-header" style="margin-top: 10px;">
<div class="card-mat-header-text"></div>
<mat-card-title class="card-mat-title">{{a.name}}</mat-card-title>
<mat-card-subtitle>Price :{{a.price}}</mat-card-subtitle>
</mat-card-header>
<div class="img-wrapper">
<img class="mat-card-image" src={{a.image}} alt="Photo of a Shiba Inu">
</div>
<mat-card-content>
<p>
{{a.desc}}
</p>
</mat-card-content>
<mat-card-actions class="right-button" >
<button mat-button class="mat-button mat-button-base" (click)="itemStatus(i)" >
<mat-icon>{{iconName}}</mat-icon>{{itemStatis}} {{a.addedToCart}}
</button>
</mat-card-actions>
</mat-card>
还有使用的功能:
itemStatus(i){
this.items[i].addedToCart = !this.items[i].addedToCart
if(this.items[i].addedToCart)
{
this.iconName = "shopping_cart";
this.itemStatis= "Added";
}
else{
this.iconName = "add_shopping_cart";
this.itemStatis= "Add To Cart";
}
}
如果有人熟悉这种错误,请帮助我。
解决方案
您将 iconName
and维护itemStatis
在组件级别而不是级别item
检查下面的示例
https://stackblitz.com/edit/angular-ivy-moun8k
在 XComponent.ts 中更改itemStatus
为
itemStatus(i){
this.items[i].addedToCart = !this.items[i].addedToCart
}
在 HTML 中将 Button 部分更改为
<button mat-button class="mat-button mat-button-base" (click)="itemStatus(i)" >
<mat-icon>{{a.addedToCart ? 'shopping_cart' : 'add_shopping_cart'}}</mat-icon>
{{a.addedToCart ? 'Added' : 'Add To Cart'}}
</button>
推荐阅读
- node.js - Amazon CDK:构造类型不正确,即使它是从 cdk.Construct 扩展而来的?
- java - java中的算术级数
- python - 将图像对象与屏幕位置坐标配对——python
- c# - 移除动态控制
- c - C 编程:函数返回 -1,但在 `echo $?` 后得到 255
- java - 正则表达式在 Java 上的工作方式与根据 regex101 的方式不同
- powershell - Powershell:如何按时间顺序批量重命名文件并按日期排序
- html - 导入数据网站,当 Xpath 或 regexpr 不工作时:将使用 JSON
- xamarin.forms - 命名空间“PdfSharp.Xamarin.Forms”中不存在类型或命名空间名称“UWP”
- java - 添加vintage junit 5时出现OutOfMemoryError错误