Question

我正在尝试使用手风琴而不知道如何将它与表格一起使用。

我有一张桌子，在那张桌子上，我从我的组件中获取记录并使用*ngFor显示它们。现在点击一行我需要用另一个组件替换该行，所以我尝试使用手风琴。

示例：

<table class="table">
    <tbody>
        <tr *ngFor="let game of games; let i = index">
            <td>{{game.date}}</td>
            <td>{{game.label}}</td>
            <td>{{game.score}}</td>
        </tr>
    </tbody>
</table>

这是一个简单的表格，点击我要用特定内容替换该行的任何行。

样本手风琴我需要在表中使用：

<accordion>
        <accordion-group heading="About me">
            <app-member></app-member>
        </accordion-group>
        <accordion-group>
            <accordion-heading>
                Custom heading
            </accordion-heading>
            <app-member></app-member>           
        </accordion-group>
</accordion>

任何想法如何使用手风琴？感谢

Answer 1

您可以使用简单的CSS并简化它。

<强> HTML

   <table class="table">
    <tbody>
        <tr *ngFor="let game of games; let i = index" [ngClass]="{activetab: isActive(game.label)}">
            <div (click)="getSub(game.label);">
                <!-- use the uniqueId here  -->
                <td>{{game.date}}</td>
                <td>{{game.label}}</td>
                <td>{{game.score}}</td>
            </div>
            <table>
                <tbody [ngClass]="{activetab: isActive(game.label)}">
                    <tr *ngFor="let subgame of game.sub">
                        <td>{{subgame.date}}</td>
                        <td>{{subgame.label}}</td>
                        <td>{{subgame.score}}</td>
                    </tr>
                </tbody>
            </table>
        </tr>
    </tbody>
</table>

<强> CSS

tr .activetab {
    display: block !important;
}

<强> TS

      isActive(id) {
        return this.selected === id;
      }

     getSub(id) {
   //TODO//
    this.selected = (this.selected === id ? null : id);
  }

我认为这应该可行。

编辑：您可以在https://plnkr.co/edit/B66nuR?p=preview

上引用相同的示例

如何使用带有角度表2的手风琴

1 个答案: