angular - Onclick不同的按钮，数据应该相应地使用角度材料显示在mat-table中。？

Question

如何在单击上面突出显示的按钮时显示已售出和未售出的分类.??....

1. 所有库存按钮 - 应显示已售出和未售出
2. 已售按钮---应仅显示已售分类
3. 未售出的按钮--- 应该只显示未售出的分类。

在此处输入图像描述

标签： angularangular-material

Answer 1

您可以使用mat-tabs 参考

为 All Stocks、Sold 和 Unsold 创建组件，并在这些组件中添加您的表格。现在，在 mat-tab 中渲染这些组件

<mat-tab-group>
  <mat-tab label="All Stock"> <app-stock></app-stock> </mat-tab>
  <mat-tab label="Sold"> <app-sold></app-sold> </mat-tab>
  <mat-tab label="UnSold"> <app-unsold></app-unsold> </mat-tab>
</mat-tab-group>

您还可以将表格本身保存在 mat-tab 中，而不是那些 app-stock 和其他组件。但是，在设计方面，最好将表格放在单独的组件中