angular - 在按钮单击时显示表格

Question

单击扫描按钮时，应显示垫表。

app.component.html：

 <button class="btn btn-primary">Scan</button>
 <div class="table-responsive">
 <table class="table-bg" mat-table [dataSource]="dataSource" matSort>
 <div>
 <ng-container matColumnDef="slNo">
 <th mat-header-cell *matHeaderCellDef mat-sort-header> Sl. No.</th>
 <td mat-cell *matCellDef="let item ; let i= index">{{ i + 1 }}</td>
 </ng-container>
 <ng-container matColumnDef="name">
 <th mat-header-cell *matHeaderCellDef mat-sort-header> Name</th>
 <td mat-cell *matCellDef="let item ; let i= index">{{name}} </td>
 </ng-container>
 </div>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row;  columns: displayedColumns;"></tr>
 </table>
</div>

Answer 1

您可以使用 *ngIf 来完成此操作。

在 typescript 文件 (app.component.ts) 中创建一个名为 showTable 的新变量，并将其默认设置为 false。

showTable: boolean = false;

然后，我们将通过创建按钮将调用的函数来使按钮将其切换为真或假。将此函数也放入 app.component.ts

toggleShowTable(): void {
    this.showTable = !this.showTable;
}

最后，我们将代码添加到您的 html 中以使这一切正常工作。

向您的按钮添加（单击）功能，如下所示：

 <button (click)='toggleShowTable()' class="btn btn-primary">Scan</button>

并将 *ngIf 添加到表格的开始标记，如下所示：

 <table *ngIf='showTable' class="table-bg" mat-table [dataSource]="dataSource" matSort>

您的表格现在默认不会显示，但是一旦您单击按钮，它将开始显示。