Mat-table不会将保存在ts文件中的数据渲染到对象数组上

Mat-table是Angular Material库中的一个组件，用于展示表格数据。它可以将保存在ts文件中的数据渲染到对象数组上。

在使用Mat-table时，需要先定义一个数据源（DataSource），该数据源可以是一个对象数组。在ts文件中，我们可以创建一个对象数组，并将数据保存在其中。然后，通过将该对象数组赋值给Mat-table的数据源，即可实现数据的渲染。

以下是一个示例代码：

在ts文件中定义一个对象数组，并保存数据：

export interface UserData {
  name: string;
  age: number;
}

const users: UserData[] = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 30 },
  { name: 'Bob', age: 35 }
];

在组件类中创建一个数据源，并将对象数组赋值给数据源：

import { MatTableDataSource } from '@angular/material/table';

export class MyComponent {
  dataSource = new MatTableDataSource<UserData>(users);
}

在HTML模板中使用Mat-table组件，并绑定数据源：

<table mat-table [dataSource]="dataSource">
  <!-- 列定义 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let user">{{ user.name }}</td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef>Age</th>
    <td mat-cell *matCellDef="let user">{{ user.age }}</td>
  </ng-container>

  <!-- 列绑定 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

在上述代码中，我们通过[dataSource]属性将数据源绑定到Mat-table组件上。然后，使用matColumnDef定义列，并使用*matCellDef指令将数据绑定到对应的单元格上。

这样，当组件加载时，Mat-table会自动将保存在ts文件中的数据渲染到对象数组上，并显示在表格中。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云数据库MySQL、腾讯云对象存储（COS）等。你可以通过访问腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。