Угловой - Обновление таблицы при изменении источника данных

Question

Как мне обновить таблицу в моем Angular при изменении списка?

Это мой компонент для исправления данных html

<mat-card>
    <mat-card-header>
      <mat-card-title>Select Range</mat-card-title>
    </mat-card-header>
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

      <ng-container matColumnDef="emp_Name">
        <th mat-header-cell *matHeaderCellDef> Emp_name </th>
        <td mat-cell *matCellDef="let element"> {{element.emp_Name}} </td>
      </ng-container>

      <ng-container matColumnDef="actualLogin">
        <th mat-header-cell *matHeaderCellDef> Actual Login </th>
        <td mat-cell *matCellDef="let element"> {{element.actualLogin}} </td>
      </ng-container>

      <ng-container matColumnDef="actualLogout">
        <th mat-header-cell *matHeaderCellDef> Actual Logout </th>
        <td mat-cell *matCellDef="let element"> {{element.actualLogout}} </td>
      </ng-container>
      <ng-container matColumnDef="shiftLogin">
        <th mat-header-cell *matHeaderCellDef> Shift Login </th>
        <td mat-cell *matCellDef="let element"> {{element.shiftLogin}} </td>
      </ng-container>
      <ng-container matColumnDef="shiftLogout">
        <th mat-header-cell *matHeaderCellDef> Shift Logout </th>
        <td mat-cell *matCellDef="let element"> {{element.shiftLogout}} </td>
      </ng-container>
      <ng-container matColumnDef="bioLogin">
        <th mat-header-cell *matHeaderCellDef> Bio Login </th>
        <td mat-cell *matCellDef="let element"> {{element.bioLogin}} </td>
      </ng-container>
      <ng-container matColumnDef="bioLogout">
        <th mat-header-cell *matHeaderCellDef> Bio Logout </th>
        <td mat-cell *matCellDef="let element"> {{element.bioLogout}} </td>
      </ng-container>
      <ng-container matColumnDef="remarks">
        <th mat-header-cell *matHeaderCellDef> Remarks </th>
        <td mat-cell *matCellDef="let element"> {{element.remarks}} </td>
      </ng-container>
      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef> Date </th>
        <td mat-cell *matCellDef="let element"> {{element.date}} 
            <button mat-raised-button (click)="onEdit(element)">Edit</button> 
            <button mat-raised-button >Validate</button> 
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
  </mat-card>

И это объявление

ELEMENT_DATA: DataCorrectionElement[];
  displayedColumns: string[] = ['emp_Name', 'actualLogin', 'actualLogout', 'shiftLogin',
            'shiftLogout', 'bioLogin', 'bioLogout', 'remarks', 'date'];
  dataSource = new MatTableDataSource(this.ELEMENT_DATA);

И это метод, который заполняет таблицу данными

onSubmit() {
    this.http.post('http://localhost:5000/api/DataCorrection/DataCorrection', this.form.value)
    .toPromise()
    .then(res => {
      this.simpleService.setListValue(res as DataCorrectionElement[]);
      this.dataSource = new MatTableDataSource(this.simpleService.getListValue());
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      });
  }

В моем HTML у меня есть кнопка.в каждом ряду.Когда кнопка нажата.Этот метод выполняется

  onEdit(PMId) {
    const dialogRef = this.dialog.open(AttendanceDialogComponent, {
      width: '60%',
      data: { EmployeeName: PMId.emp_Name,
              emp_Id: PMId.emp_Id,
              actualLogin: PMId.actualLogin,
              actualLogout: PMId.actualLogout,
              shiftLogin: PMId.shiftLogin,
              shiftLogout: PMId.shiftLogout,
              bioLogin: PMId.bioLogin,
              bioLogout: PMId.bioLogout,
              remarks: PMId.remarks,
              date: PMId.date,
              Pos_Id: PMId.pos_Id }
    });
    }

Затем я показываю диалоговое окно материала

, когда я нажимаю кнопку в диалоговом окне, этот метод называется

Этот метод находится в службеclass

    public methodCall(data): void {

        console.log('This method is called');
        if (this.list.find(x => x.pos_Id === data.Pos_Id)) {
          this.list.splice(this.list.findIndex(x => x.pos_Id === data.Pos_Id), 1);
          console.log('Removed');
       }
        // this.list.find(x => x.emp_Id == 123);


      }
//this is the declaration
    list: DataCorrectionElement[];


//this is the model
    export interface DataCorrectionElement {
        emp_Name: string;
        emp_Id: number;
        pos_Id: number;
        actualLogin: string;
        actualLogout: string;
        shiftLogin: string;
        shiftLogout: string;
        bioLogin: string;
        bioLogout: string;
        remarks: string;
        date: string;
      }

Теперь я хочу обновить данные таблицы, когда удаляю данные из списка.Как я могу это сделать?

Большое спасибо