单击具有不同类名的另一行时隐藏/显示具有特定类名的表行?在角度 2.

Question

我正在尝试在角度 2 中实现表行切换功能。从检索到的数据循环中显示具有不同类的两种类型的表行。像这样的事情.

<table>
    <thead></thead>
    <tbody class="data-item" *ngFor = "let member of teamMember" >
            <tr class="default">
                <td *ngFor = "let hrs of member.Value.hoursLogged">
                    {{ hrs }}
                </td>
            </tr>
            <tr class="toggle-row" *ngFor = "let subtask of member.Value.subTasks">
                <td *ngFor="let hrs of subtask.subtaskHoursLogged">
                    {{ hrs }}
                </td>
            </tr>
    <tbody>
</table>

问题是当单击具有类默认值的表行时，如何使用类切换行切换表行。

我的 JSON 文件是这样的

[
    {
        "name": "Timothy Clogg",
        "Position":"Project Manager",
        "imgUrl":"http://www.theappvillage.com/wp-content/uploads/2013/04/David_McGowan_portrait_square.png",
        "hoursLogged":[ 1.2, " ",2.3, 4.5, 5.6,3.1, " " ],
        "totalHours":15.91,
        "totalMoney":"$1234.12",
        "toggle":1,
        "subTasks":[
            {
                "taskType":"consulting",
                 "subtaskHoursLogged":[ 1.2, " ",2.3, 4.5, 5.6,3.1, " " ],
                 "subtaskTotalHour":3.45,
                 "subtaskMoney":"$234.45"
            },
            {
                "taskType":"consulting",
                 "subtaskHoursLogged":[ 1.2, " ",2.3, 4.5, 5.6,3.1, " " ],
                 "subtaskTotalHour":3.45,
                 "subtaskMoney":"$234.45"
            },
            {
                "taskType":"consulting",
                 "subtaskHoursLogged":[ 1.2, " ",2.3, 4.5, 5.6,3.1, " " ],
                 "subtaskTotalHour":3.45,
                 "subtaskMoney":"$234.45"
            }
        ]
    },
   {data},
   {data}
 ]

，

Answer 1

可以使用隐藏和类属性绑定来实现此目的，如下所示：

 <tbody class="data-item" *ngFor = "let member of teamMember" >
            <tr [class.toggle-row]="!member.toggle" [class.default]="member.toggle" [hidden]="member.toggle">
                <td *ngFor = "let hrs of member.Value.hoursLogged">
                    {{ hrs }}
                </td>
            </tr>
            <tr [hidden]="!member.toggle" [class.toggle-row]="!member.toggle" [class.default]="member.toggle" *ngFor = "let subtask of member.Value.subTasks">
                <td *ngFor="let hrs of subtask.subtaskHoursLogged">
                    {{ hrs }}
                </td>
            </tr>
    <tbody>

注意：必须将member.toggle属性添加到 json 中