Angular如何实现点击Scan按钮后显示mat table表格

你需要按以下步骤修改代码实现点击Scan按钮后展示mat-table的效果：

• 第一步：修改app.component.ts组件代码，添加控制变量、表格配置和点击事件逻辑

import { Component, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 配置表格显示列
  displayedColumns: string[] = ['slNo', 'name'];
  // 表格数据源，初始为空
  dataSource = new MatTableDataSource<any>([]);
  // 表格显示控制变量，初始隐藏
  isTableVisible = false;

  @ViewChild(MatSort) sort!: MatSort;

  // Scan按钮点击事件
  scan(): void {
    // 显示表格
    this.isTableVisible = true;
    // 此处可以替换为实际的接口请求获取表格数据
    const mockData = [
      {name: '测试数据1'},
      {name: '测试数据2'},
      {name: '测试数据3'}
    ];
    // 给数据源赋值
    this.dataSource.data = mockData;
    // 绑定排序功能
    this.dataSource.sort = this.sort;
  }
}

• 第二步：修改app.component.html模板代码，添加事件绑定、显示控制，同时修复原有模板错误

<!-- 给Scan按钮绑定点击事件 -->
<button class="btn btn-primary" (click)="scan()">Scan</button>
<!-- 用*ngIf绑定控制变量，点击后才渲染表格区域 -->
<div class="table-responsive" *ngIf="isTableVisible">
  <table class="table-bg" mat-table [dataSource]="dataSource" matSort>
    <!-- 移除原代码中多余的div标签，mat-table内不允许嵌套无关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>
      <!-- 修复原代码的插值错误，应该取当前行item的name属性 -->
      <td mat-cell *matCellDef="let item ; let i= index">{{item.name}} </td>
    </ng-container>

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

补充说明 #

如果你的需求是点击Scan按钮时才从后端拉取数据，只需要把scan方法里的mockData替换为实际的HTTP请求逻辑即可，拿到返回数据后赋值给this.dataSource.data就会自动渲染表格。

内容的提问来源于stack exchange，提问作者Bhargavi