Question

我最近尝试使用angular，并且想在桌子上添加手风琴，并且我的table子出现在每一行中。如何解决它？

打字稿代码

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“数据”中添加属性showAccordion。现在它不起作用，因为没有条件可以隐藏整个手风琴。如果这样做没有帮助，我建议您提供简单的图表以显示您要实现的目标。

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

1 个答案: