Angular 如何通过使用插值的代码进行更改

如何通过值更改#card10和“VerBoton10”​​物体的形状

我可以在div文本中完成，但不能在我指定的位置完成

我想要实现的是在HTML和TypeScript代码中使用通过插值获得的名称，以避免每个元素有一行

谢谢你的关注

你可以看到

名称：{{card.Name}


ID:{{card.ID}


Hecho{{card.name}


复印机

据我所知，您希望通过单击卡号10来控制按钮的激活。另一方面，您只能在html部分中控制Card10的外观

检查此代码并告诉我：

名称：{{card.Name}


ID:{{card.ID}


Hecho{{card.name}


复印机

从'@angular/core'导入{Component，ViewChild}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
卡片=[
{姓名：'#card10'，id:10}，
{姓名：'#card11'，id:11}，
{姓名：'#card12'，id:12}，
{姓名：'#card13'，id:13}，
{姓名：'#card14'，id:14}
];
activateButtons=true；
onclickecho（numCard:number）{
如果（numCard==10）{
this.activateButtons=false；
}
}
报告人（）{
this.activateButtons=true；
}
}

---

您可以提取

！在另一个变量（如
isGreenCard
）中激活按钮和&card.id==10，以提高可读性。
出于历史目的，我保留了最后一个答案

现在你要做的是让卡片变成绿色，当你点击它时里面的按钮消失。更新代码如下：

实现这一要求有多种方法。如果服务器中需要激活数据，则必须将其放入模型中，它类似于
{name:string，id:number，activated:boolean}
。但是，如果后端不需要这些数据，您可以将其保留在前端（建议的解决方案）


名称：{{card.Name}


ID:{{card.ID}


Hecho{{card.name}


复印机

从'@angular/core'导入{Component，ViewChild}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
卡片=[]；
活动卡=[]；
构造函数（）{
这张卡=[
{姓名：'#card10'，id:10}，
{姓名：'#card11'，id:11}，
{姓名：'#card12'，id:12}，
{姓名：'#card13'，id:13}，
{姓名：'#card14'，id:14}
];
这个。激活全部（）；
}
onClickHecho（idex:编号）{
this.activeCards[idex]=false；
}
报告人（）{
这个。激活全部（）；
}
activateAll（）{
this.activeCards=this.cards.map（（）=>true）；
}
}
onClickHecho（item）
然后你就拥有了整个对象。为什么你不简单地使用item而不是cards[indice]？card10和verBoton10的目的是什么？你能解释一下你想要实现什么吗？谢谢，埃尔玛。对不起，我的英语很差。我真正需要的是能够替换不同的按钮（10,11,12,13,14…），以避免在应用按钮的唯一更改时出现大量曲目代码，在您的示例中，更改将应用于所有按钮，我需要的是，它们只适用于与作为参数传递的索引相对应的索引。谢谢你你有多少按钮？假设你有20个或更多！你认为为每个按钮声明一个变量是一个好主意吗？我有8张卡，每个卡上都有一个按钮，按下时我需要隐藏，并更改两个组件的css，因此按钮后面要执行的代码很长且重复，这就是为什么我在寻找一种方法，只需一个周期就可以在HTML中创建元素，然后使用插值，允许我用一个以按钮编号为参数的代码控制所有按钮。。。。。。。。。。。。。。。。。。。。。。。。。。。。。姓名：{{card.Name}}
ID:{{card.ID}}
因此，您需要的是当您单击一个按钮时，该卡将变为绿色，而该按钮将消失。其他的按钮都是隐藏的。我说的对吗？你的回答完全是我提出的疑问，但是要问这个问题，我简化了问题，只将其保留在卡的两种可能状态中，然而实际上我需要卡具有多个状态，并且这些状态可以将它们保存在一个数据基中。再问一个问题好吗？谢谢你是的，这次把你的完整代码，我不理解这个问题