Создать строку MatTableDataSource Angular 7

Question

У меня есть некоторые проблемы, у меня есть таблица с входными данными, и мне нужно создать одну новую строку, сохранить и снова загрузить эту дату и повторить этот поток данных данных поля, я хотел бы начать с этой даты, так как ядобавить новые строки в следующей строке данных добавить больше данных за один день + 1

в этом методе я получаю данные из базы данных

getPerformances() {  
  this.service.getData('/v1/campanhas/anuncios/desempenhos')
            .subscribe((res) => {
                for(let i = 0; i < res.length; i++) {
                  console.log(res[i])
                }
                this.performances = new MatTableDataSource(res.filter(e => e.anuncio_id == this.poster.id)); 
                this.performances.paginator = this.paginator;
                this.performances.sort = this.sort;
            })
}

и здесь метод, который добавляет другую строку

addRow() {  
// this.inicio = new Date(this._today.setDate(this._today.getDate() + 1));
   this.added = false;
    ELEMENT_DATA.push(this.service.performance)
   this.performances = new MatTableDataSource(ELEMENT_DATA);
}

и моя таблица

<table mat-table [dataSource]="performances" class="mat-elevation-z8" matSort>
              <!-- Date begin register Column -->
              <ng-container matColumnDef="dt_registro">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Data </th>
                <td mat-cell *matCellDef="let performance">  
                  {{ performance.dt_registro }}
                    <input matInput [matDatepicker]="picker" name="registro" #registro="ngModel" [(ngModel)]="performance.dt_registro" disabled>
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </td>
              </ng-container> 

              <!-- CUSTO Column -->
              <ng-container matColumnDef="custo">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Custo </th>
                <td mat-cell *matCellDef="let performance"> 
                    <input type="text" matInput name="custo" #custo="ngModel" [(ngModel)]="performance.custo" placeholder="0">  
                </td> 
              </ng-container> 

              <!-- CUSTO Column -->
              <ng-container matColumnDef="page_view">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Page Views </th>
                <td mat-cell *matCellDef="let performance"> 
                    <input type="text" matInput name="page_view" #page_view="ngModel" [(ngModel)]="performance.page_view" placeholder="0">  
                </td>
              </ng-container> 

              <!-- Symbol Column -->
              <ng-container matColumnDef="icon">
                <th mat-header-cell *matHeaderCellDef>  </th>
                <td mat-cell *matCellDef="let performance"> 
                  <mat-icon (click)="save(performance)" id="row-click" matTooltip="Salvar desempenho">{{ !added ? 'save' : 'edit' }}</mat-icon> 
                  <mat-icon (click)="addRow()" id="row-click" matTooltip="Salvar desempenho">add</mat-icon> 
                </td>
              </ng-container>

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

            </table>

тогда, как можно создать новую строку, сохранить элемент по элементу и зарегистрировать дату + 1

и почему внутри подписывается отображение цикла (для)одни и те же данные несколько раз?Например, у меня есть только 2 itens в таблице, и мой цикл возвращается, так что

{id: 1, custo: 150, page_view: 120, clicks: 189, visitantes: 147, …}                                      
{id: 2, custo: 11, page_view: 12, clicks: 13, visitantes: 14, …}
{id: 1, custo: 150, page_view: 120, clicks: 189, visitantes: 147, …}
{id: 2, custo: 11, page_view: 12, clicks: 13, visitantes: 14, …}
{id: 1, custo: 150, page_view: 120, clicks: 189, visitantes: 147, …}
{id: 2, custo: 11, page_view: 12, clicks: 13, visitantes: 14, …} 
{id: 1, custo: 150, page_view: 120, clicks: 189, visitantes: 147, …}
{id: 2, custo: 11, page_view: 12, clicks: 13, visitantes: 14, …}