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

Question

我正在尝试在angular 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文件ist像这样

[
    {
        "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

您可以使用hidden和class属性绑定来实现此目的，如下所示：

 <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中