Angular 为卡片描述创建多个独立的切换按钮

我想在每张卡片上创建一个显示自己描述的切换按钮

我知道我可以用按钮绑定不同的变量，但这对我来说不是一个解决方案，因为我可能有很多卡片，而且不确定。请帮我解决这个问题

HTML

创建一个新的特定组件来封装卡的逻辑，比如today-attention-card.component 将布尔expandStatus移动到它的typescript代码中，使它们都独立。同时移动您的*ngFor=let。。。高一 添加@input alt:any；到新组件ts代码的顶部，为组件提供切换时显示的数据。 像这样使用新组件

        <div class="col-sm-5" *ngFor="let atl of TodayAttendance">
            <app-today-attendance [alt]="alt"><app-today-attendance>
        <div>
<div>```

您也可以简单地将一个参数传递给expand方法，但是您可能会错过angular希望您做的事情

---

你确实应该考虑使用角的组件架构概念，因为这是最简单的一种。

如果每个卡都可以展开或折叠，那么每个卡，即出席日数组的每个元素都必须有一个扩展标志。您不可能在组件中使用单个布尔字段来包含所有卡的状态。如果您这样做，那么要么所有的卡都展开，要么所有的卡都折叠。您可以在expandDetails函数中传递项目，以便跟踪其状态单击=expandDetailsatl，atl项目可以存储atl。expandStatus:booleanYeah，就像poulay说的那样。不过，我会有更多的组件。就像poulay说的那样为Yeah创建组件。不过，我会有更多的组件。为卡片、标题、描述、切换、可折叠创建组件，并使用输入和输出使所有内容相互对话。此外，您的卡可以做更多。

   expandStatus=true;
      expandDetails(){
        if(this.expandStatus==true){
         this.expandStatus=false;
        }
    else{
         this.expandStatus=true;
        }
      }

        <div class="col-sm-5" *ngFor="let atl of TodayAttendance">
            <app-today-attendance [alt]="alt"><app-today-attendance>
        <div>
<div>```