Question

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

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

HTML

<div class="row">
        <div class="col-sm-5">
            <div class="card" *ngFor="let atl of TodayAttendance">
                <div class="card-header">
                    <table>
                        <tbody>
                            <tr>
                <td><button (click)="expandDetails()"></button></td>
                          <td>{{ atl.employee.name }}</td>
                          <td style="color:teal">{{ atl.punchIn }}</td>
                          <td style="color:tomato">{{ atl.punchOut}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="card-body">
                    <p>Hello</p>
                </div>
            </div>
        </div>
    </div>

TS

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

Answer 1

创建一个新的特定组件来封装卡的逻辑，例如today-attendance-card.component
移动打字稿代码中的布尔值expandStatus，使它们全部独立。还要移动您的*ngFor="let ..."上方一个<div>
添加 @input() alt: any;，以便为组件提供在切换时显示的数据。

使用这样的新组件

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

您也可以简单地将参数传递给expand（）方法，但是您会错过一些角度的要求您做些事情的方式。

您应该真正考虑使用Angular的组件体系结构概念，因为这是最简单的示例之一。

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

1 个答案: