angular - Angular Material Table - 在行中隐藏或显示组件

Question

我有一个包含两列的简单材料表数据，第一列是包含垫子选择组件的列，第二列是包含按钮的操作列。

我希望在用户单击 mat-select 组件之前隐藏操作列中的按钮。

我已经为 mat-select 实现了一个点击处理程序：

<mat-table #table [dataSource]="transactions">

    <!-- Category Column -->
    <ng-container matColumnDef="category">
        <mat-header-cell *matHeaderCellDef> Category </mat-header-cell>
        <mat-cell *matCellDef="let transaction">
            <mat-form-field floatLabel="never">
                <mat-select [(value)]="transaction.category" placeholder="Category" (click)='onClick'>
                    <mat-option *ngFor="let classItem of classes" [value]="classItem.id">
                        {{classItem.class}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </mat-cell>
    </ng-container>

    <!-- Action Column -->
    <ng-container matColumnDef="action">
        <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
        <mat-cell *matCellDef="let element">
            <button mat-flat-button color="accent">Accent</button>
        </mat-cell>
    </ng-container>


    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns; let transaction"></mat-row>
</mat-table>

我想知道如何访问属于同一行的 mat 按钮组件，以便我可以根据需要隐藏/取消隐藏它。

标签： angularangular-material