如何将手风琴与桌子角度一起使用2.

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 上引用相同的示例