我想制作手风琴，如何修复那个行表子？

Question

我最近尝试使用角度，我想在桌子上添加手风琴，我的表子出现在每一行......如何修复它？

打字稿代码

constructor(
    ...
    protected labarugiReport: ReportLabarugiService
) { }

ngOnInit(){}
...

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

async getSub(id:any){
     this.selected = (this.selected === id ? null : id);
     let dateEnd = new Date(this.dateEnd.value);
     let dateStart = new Date(this.date.value);
     this.itemSoldSub3 = await this.labarugiReport.getReoportListSoldItemByCategoryAll(this.user.principle.id, id, this.getDate(dateStart), this.getDate(dateEnd));
}

我的Scss代码

.table-container {
    .activetab {
        display: block !important;
    }

}

我从其他问题修改的HTML代码

<tbody>
   <tr *ngFor="let data of itemSoldSub2;let i=index" [ngClass]="{activetab: isActive(data.categoryId)}">
         <div (click)="getSub(data.categoryId);">

               <div *ngIf = "data.categoryName">
                        <td style="border-bottom: none;">{{data.categoryName}}</td>
                </div>
                <div *ngIf = "!data.categoryName">
                          <td style="border-bottom: none;">Uncategorized</td>
                        </div>
                      <td style="border-bottom: none;">{{data.sumPrice}}</td>
               </div>
                <!-- </tr> -->
               <table>
                  <tbody [ngClass]="{activetab: isActive(data.categoryId)}">
                      <tr *ngFor="let sub of itemSoldSub3">
                          <td>{{sub.itemName}}</td>
                          <td>{{sub.sumTotalPrice}}</td>
                      </tr>
                  </tbody>
               </table>
   </tr>
</tbody>

Answer 1

在此行添加条件

 <div (click)="getSub(data.categoryId);" *ngIf="data.showAccordion">

在方法getSub（）内部，当用户点击时生成data.showAccordion，为true。您需要在json'data'中添加属性showAccordion。现在它不起作用，因为没有条件我可以找到隐藏整个手风琴。如果这对我的建议没有帮助，你可以提供简单的图表来展示你想要实现的目标。