Question

我是Angular的新手，目前使用Angular在我的AG-Grid中显示数据。我要显示的表格看起来像这样：

ColA的用法和样例
[ColA值的下拉列表] [ColB值的下拉列表]

表：
ColA的ColB的ColC
值值值值
值值值值

这两个下拉列表的我的html代码当前为：

<mat-form-field fxFlex="15" fxFlexOffset="1">
  <mat-select placeholder="ColumnA" [(ngModel)]="tableAMain.colA" (change)="ontableAChanged()">
    <mat-option *ngFor="let colA of colAs" [value]="colA">
      {{colA}}
    </mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field fxFlex="15" fxFlexOffset="5">
  <mat-select placeholder="ColumnB" [(ngModel)]="tableAMain.colB" (change)="ontableAChanged()">
    <mat-option *ngFor="let colB of colBs" [value]="colA">
      {{colB}}
    </mat-option>
  </mat-select>
</mat-form-field>

当前，这两个下拉列表是独立的-就是说，在我的数据库中，没有包含以下值的行：

ColA ColB ColC ColC ColD
ValueE ValueF ValueG ValueH

因此，如果我从ColA下拉列表中选择“值E”，则我不希望在“ CollB下拉列表”中看到“ ValueF”作为选项，因为无论如何都不存在这样的行。此刻，我可以选择ValueE并从ColB Dropdown列表中仍然看到ValueF。我希望ColB的Dropdown值取决于我在ColA上的首次选择。

仅当存在至少一行同时满足ColA的Dropdown和ColB的Dropdown条件的行时，我的表才会填充数据。

我用来检索ColA和ColB的SQL语句是：

select ColA, ColB, EDITABLE from TableA GROUP BY ColA, ColB, EDITABLE ORDER BY lower(ColA) ASC

我已经尝试在SQL语句上使用交叉联接，但是我不确定这是否是正确的方法。

非常感谢任何提示或帮助。

编辑：Filtering different columns in a material table

尽管联系紧密并且答案很好，但是我认为标记为“最佳答案”的问题会过滤表格本身，因为我对包含列值的下拉菜单更感兴趣。我认为那里的答案对于过滤实际表本身很有帮助，但是我对与我的问题有关的答案并不满意。

如何过滤Angular中下拉列表的列？

0 个答案: