如何在数据源数组中的数据更改后使Angular mat表自动刷新

我有一个有角度的v8材质设计应用程序和一个垫子桌。它的数据源是一个简单的数组。 我在数组中添加、删除和修改项目，我希望mat表显示更改，而用户无需刷新。（特别糟糕的是，当使用有角度的页面时，F5刷新会使您找不到页面）

我为此搜索了不少，我最喜欢的文章是： 它有21个，是的，21个建议答案。我肯定遗漏了什么，但我原以为mat表的设计者会提供一个简单的javascript调用来实现这一点。 虽然我希望任何人都能给我一个很好的答案，但我特别希望Angular团队的一位工程师解释一下，他们认为应该如何使用一个表来提供一个动态的、自动的绑定，类似于如何将一个简单的变量从html绑定到JavaScribot，例如： {{personName}}

谢谢

===============================================================

代码

从“@angular/core”导入{Component，OnInit}；
从“../Element”导入{Element}；
从“../elements.service”导入{ElementsService}；
从“@angular/material”导入{MatTable}；
导出接口周期元素{
_id：字符串；
名称：字符串；
重量：个数；
符号：字符串；
}
@组成部分({
选择器：“将表格应用到mongo”，
templateUrl:'./表到mongo.component.html'，
样式URL:['./表到mongo.component.css']
})
导出类TableToMongoComponent实现OnInit{
//这是表显示的真实数组，我通过调用mongo加载它
周期元素：元素[]=[]；
//需要垫桌子
displayedColumns:string[]=['position'，'name'，'weight'，'symbol']；
dataSource=this.periodiceElement；
=========================
从这里开始-->
不
{{element.\u id}}
名称
{{element.name}
重量
{{element.weight}}
象征
{{element.symbol}

您能告诉我们如何将mat表绑定到您的代码吗？从“@angular/core”导入{Component，OnInit}；从“../Element”导入{Element}；从“../elements.service”导入{ElementsService}；从“@angular/material”导入{MatTable}；导出接口周期元素{{u id:string；name:string；weight:number；symbol:string；}@Component（{selector:'app table to mongo'，templateUrl:'./table to mongo.Component.html'，styleURL:['./table to mongo.Component.css']}）导出类TableToMongoComponent实现OnInit{将其添加到帖子而不是注释

import { Component, OnInit } from '@angular/core';
import { Element } from '../Element';
import { ElementsService } from '../elements.service';
import { MatTable} from '@angular/material';

export interface PeriodicElement {
  _id: string;
  name: string;
  weight: number;
  symbol: string;
}

@Component({
  selector: 'app-table-to-mongo',
  templateUrl: './table-to-mongo.component.html',
  styleUrls: ['./table-to-mongo.component.css']
})
export class TableToMongoComponent implements OnInit {

 // this is the real array that the table displays from, I load it from a call to mongo
  PeriodicElement: Element[] = [];

  // needed for mat-table

  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = this.PeriodicElement;

=========================

able starts here -->
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <!-- shows as position but it linked to my _id property -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element._id}} </td>
    </ng-container>


    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef> Weight </th>
      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef> Symbol </th>
      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

    <!-- this line is what gets me the "click on any row and give me a row object" functionality -->
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>

  </table>