Angular中数组新增数据后不刷新页面无法实时展示的问题

你遇到的问题是因为Angular Material的mat-table对普通数组的变更感知有限：直接用push修改原数组时，数组的引用地址没有改变，Angular的变更检测机制无法触发视图更新，但控制台能看到数组内容是因为你直接修改了数组本身。

下面提供两种可行的解决方式：

方法一：使用MatTableDataSource（推荐） #

Angular Material提供的MatTableDataSource专门用于表格数据源，它会自动监听数据变化并更新视图。

修改user.component.ts：

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table'; // 导入MatTableDataSource

interface User {
  id: number;
  email: string;
  firstName: string;
  lastName: string;
  role: string;
  status: string;
}

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  displayedColumns: string[] = ['id', 'email', 'firstName', 'role', 'status']; // 确保定义所有列
  dataSource = new MatTableDataSource<User>([
    {
      id: 1,
      email: 'Mellie',
      firstName: 'Gabbott',
      lastName: 'mgabbott0@indiatimes.com',
      role: 'Female',
      status: 'Support'
    },
    {
      id: 2,
      email: 'Mellie',
      firstName: 'Gabbott',
      lastName: 'mgabbott0@indiatimes.com',
      role: 'Female',
      status: 'Support'
    },
  ]);

  onEmpCreate(){
    const test: User = {
      id: 3,
      email: 'abc@test.com',
      firstName: 'Jim',
      lastName: 'Rambo',
      role: 'Doctor',
      status: 'Active'
    };
    // 用扩展运算符创建新数组，触发变更检测
    this.dataSource.data = [...this.dataSource.data, test];
  }
}

修改user.component.html的数据源绑定：

Hello
<table mat-table [dataSource]="dataSource">
    <!-- 列定义保持不变 -->
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> Id </th>
        <td mat-cell *matCellDef="let user"> {{user.id}} </td>
    </ng-container>
    <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef> email </th>
        <td mat-cell *matCellDef="let user"> {{user.email}} </td>
    </ng-container>
    <ng-container matColumnDef="firstName">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let user"> {{user.firstName}} {{user.lastName}} </td>
    </ng-container>
    <ng-container matColumnDef="role">
        <th mat-header-cell *matHeaderCellDef> role </th>
        <td mat-cell *matCellDef="let user"> {{user.role}} </td>
    </ng-container>
    <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef> status </th>
        <td mat-cell *matCellDef="let user"> {{user.status}} </td>
    </ng-container>

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

<button (click)="onEmpCreate()">Add User</button>

方法二：用Immutable方式更新数组（不使用MatTableDataSource） #

如果不想引入MatTableDataSource，可以通过创建新数组的方式让Angular检测到数据变化——Angular会监听数组引用的变化：

修改user.component.ts中的onEmpCreate方法：

onEmpCreate(){
    const test: User = {
      id: 3,
      email: 'abc@test.com',
      firstName: 'Jim',
      lastName: 'Rambo',
      role: 'Doctor',
      status: 'Active'
    };
    // 用扩展运算符创建新数组，替换原数组
    this.UserData = [...this.UserData, test];
    console.log(this.UserData);
}

关键原因说明 #

• 直接调用push修改原数组时，数组的引用地址未改变，Angular默认变更检测无法感知内部元素变化。
• 而用[...原数组, 新元素]创建新数组，或使用MatTableDataSource的方式，都会改变数据源引用或触发内部变更通知，从而让Angular更新视图。

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