创建行MatTableDataSource角7

时间:2019-05-19 22:03:42

标签: angular7

我遇到了一些挑战,我有一个带有输入的表,我需要创建一个新行,然后再次保存并加载该日期,然后再次重复此操作 有现场数据,我想从这个日期开始,所以当我在下一行中添加新行时,数据会添加更多的一天数据+ 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个iten,循环返回,所以

{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, …}

0 个答案:

没有答案