Question

tl; dr; -见下面我的回答；解决方案是提供trackBy功能

我有一个使用mat-table的简单时间表应用程序，用户可以在其中添加一周中每一天的工作时间。

按特定顺序添加和删除添加行不起作用。

重现问题的步骤：

添加一个新行，将星期日设置为1 添加另一行并将周日设置为2 删除第一行-现在将有一行符合预期的Sunday = 2 现在添加另一行。预期的行为-添加新行，并且第一行Sunday值仍为2。实际行为-已添加新行，但第一行已重置为0，就像我要获得2个新行。

我知道有很多建议的方法来设置表数据源-我已经尝试了所有方法，但是没有什么区别。每次添加/删除时，下面显示的版本都会重新实例化数据源，但是我也尝试过设置datasource.data属性，但这没有什么区别。基础数组始终包含期望值，只是在上述情况下，表似乎未正确绑定。

我已经从该应用中剥离了核心功能，并做了一个简单的演示，并在此处上传：Github。这是角度8的角度8。角度7上也发生了同样的事情。

这是标记

    <div class='timesheets'>


  <div>Timesheets</div>
  <form #formControl="ngForm" autocomplete="off">
  <mat-table [dataSource]="timesheetEntryDataSource" #timesheetTable matSort>  

          <ng-container matColumnDef="actions">
              <mat-header-cell *matHeaderCellDef class='actions'> 
                <button mat-icon-button color="primary" (click)="add()" [disabled]="!!attendance?.approvalDate">
                    <mat-icon aria-label="Add">add</mat-icon>
            </button>                  
              </mat-header-cell>
              <mat-cell *matCellDef="let entry"  class='actions'>
                  <button mat-icon-button color="primary" (click)="remove(entry)" >
                      <mat-icon aria-label="Delete">delete</mat-icon>
                  </button>
              </mat-cell>
              <mat-footer-cell *matFooterCellDef class='actions'></mat-footer-cell>  
          </ng-container>

          <ng-container matColumnDef="sunday">
              <mat-header-cell *matHeaderCellDef>Sunday</mat-header-cell>
              <mat-cell *matCellDef="let entry;let i = index;" class="hours">
                      <mat-form-field>
                          <input min=0  max=23.75 pattern="^(?!0\d)\d+(?:[.](?:25|5|75|0)0*)?$" required #today="ngModel" matInput [(ngModel)]="entry.sundayHours"  name="sunday{{i}}">
                      </mat-form-field>
                  </mat-cell>   
                  <mat-footer-cell *matFooterCellDef></mat-footer-cell>              
          </ng-container>
          <ng-container matColumnDef="monday">
              <mat-header-cell *matHeaderCellDef>Monday</mat-header-cell>
              <mat-cell *matCellDef="let entry;let i = index;" class="hours">

                  <mat-form-field>
                      <input min=0  max=23.75 pattern="^(?!0\d)\d+(?:[.](?:25|5|75|0)0*)?$" required #today="ngModel" matInput [(ngModel)]="entry.mondayHours"  name="monday{{i}}">
                  </mat-form-field>
                  </mat-cell>
                  <mat-footer-cell *matFooterCellDef></mat-footer-cell>  
          </ng-container>

          <ng-container matColumnDef="tuesday">
              <mat-header-cell *matHeaderCellDef>Tuesday</mat-header-cell>
              <mat-cell *matCellDef="let entry;let i = index;" class="hours">
                      <mat-form-field>
                          <input min=0  max=23.75 pattern="^(?!0\d)\d+(?:[.](?:25|5|75|0)0*)?$" required #today="ngModel" matInput [(ngModel)]="entry.tuesdayHours" name="tuesday{{i}}">
                      </mat-form-field>
                  </mat-cell>
                  <mat-footer-cell *matFooterCellDef></mat-footer-cell>  
          </ng-container>

          <ng-container matColumnDef="wednesday">
              <mat-header-cell *matHeaderCellDef>Wednesday</mat-header-cell>
              <mat-cell *matCellDef="let entry;let i = index;" class="hours">
                      <mat-form-field>
                          <input min=0  max=23.75 pattern="^(?!0\d)\d+(?:[.](?:25|5|75|0)0*)?$" required #today="ngModel" matInput [(ngModel)]="entry.wednesdayHours" name="wednesday{{i}}">
                      </mat-form-field>
                  </mat-cell>
                  <mat-footer-cell *matFooterCellDef></mat-footer-cell>  
          </ng-container>

          <ng-container matColumnDef="thursday">
              <mat-header-cell *matHeaderCellDef>Thursday</mat-header-cell>
              <mat-cell *matCellDef="let entry;let i = index;" class="hours">
                      <mat-form-field>
                          <input min=0  max=23.75 pattern="^(?!0\d)\d+(?:[.](?:25|5|75|0)0*)?$" required #today="ngModel" matInput [(ngModel)]="entry.thursdayHours" name="thursday{{i}}">
                      </mat-form-field>
                  </mat-cell>
                  <mat-footer-cell *matFooterCellDef></mat-footer-cell>  
          </ng-container>

          <ng-container matColumnDef="friday">
              <mat-header-cell *matHeaderCellDef>Friday</mat-header-cell>
              <mat-cell *matCellDef="let entry;let i = index;" class="hours">
                      <mat-form-field>
                          <input min=0  max=23.75 pattern="^(?!0\d)\d+(?:[.](?:25|5|75|0)0*)?$" required #today="ngModel" matInput [(ngModel)]="entry.fridayHours"  name="friday{{i}}">
                      </mat-form-field>
                  </mat-cell>
                  <mat-footer-cell *matFooterCellDef></mat-footer-cell>  
          </ng-container>

          <ng-container matColumnDef="saturday">
              <mat-header-cell *matHeaderCellDef>Saturday</mat-header-cell>
              <mat-cell *matCellDef="let entry;let i = index;" class="hours">
                      <mat-form-field>
                          <input min=0  max=23.75 pattern="^(?!0\d)\d+(?:[.](?:25|5|75|0)0*)?$" required #today="ngModel" matInput [(ngModel)]="entry.saturdayHours"  name="saturday{{i}}">
                      </mat-form-field>
              </mat-cell>
              <mat-footer-cell *matFooterCellDef></mat-footer-cell>   
          </ng-container>


          <mat-header-row *matHeaderRowDef="timesheetColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: timesheetColumns;"></mat-row>
          <mat-footer-row *matFooterRowDef="timesheetColumns"></mat-footer-row>
      </mat-table>

      </form>
</div>

和代码：

import { Component } from '@angular/core';

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




export class TimesheetEntry {
  mondayHours:string = '0'
  tuesdayHours:string = '0'
  wednesdayHours:string = '0'
  thursdayHours:string = '0'
  fridayHours:string = '0'
  saturdayHours:string = '0'
  sundayHours:string = '0'
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'tabledemo';

  timesheetEntryDataSource: MatTableDataSource<TimesheetEntry>;
  timesheetColumns = ['actions', 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'  ];

  tmpTimesheet:TimesheetEntry[] = [];


  constructor( ) { }


  ngOnInit() {
    this.timesheetEntryDataSource = new MatTableDataSource<TimesheetEntry>([]);
  }



  add(){
    this.tmpTimesheet.push(new TimesheetEntry());
    this.timesheetEntryDataSource = new MatTableDataSource<TimesheetEntry>(this.tmpTimesheet.slice());

  }

  remove(exception: TimesheetEntry){
    this.tmpTimesheet.splice(this.tmpTimesheet.findIndex(e => e === exception),1);
    this.timesheetEntryDataSource = new MatTableDataSource<TimesheetEntry>(this.tmpTimesheet.slice());
  }

  typeComparatorFn(select, option) {
    return select && option ? select.code === option.code : select === option;
  }



}

Answer 1

问题是使用索引来创建唯一的名称属性（在表单标签中使用ngModel时，名称属性是必需的-我正在使用模板化表单）。

*matCellDef="let entry;let i = index;"

<input min=0  max=23.75 pattern="^(?!0\d)\d+(?:[.](?:25|5|75|0)0*)?$" required #today="ngModel" matInput [(ngModel)]="entry.sundayHours"  name="sunday{{i}}">

似乎在数据源中添加项或从数据源中删除项并不能始终如一地更新更新索引，在我的场景中，我最终得到两个具有相同索引的条目。

解决方案是指定documentation

中指定的trackBy函数

就我而言，我将其添加到.ts文件中：

  trackByFn(index, item) {
return index;

}

在标记中：

<mat-table [dataSource]="tmpTimesheet" [trackBy]="trackByFn">

这似乎可以解决问题，但是本来可以更清楚地记录下来，因为我确定以Angular模板形式向mat-table中添加行/从mat-table中删除行并不是不常见的操作，而且我敢肯定还有许多其他情况需要对索引进行处理。乍一看，使用let i =索引构造似乎表明所有工作都为您完成了！

角材料表-行索引不一致

1 个答案: