Question

有人可以告诉我编辑行时更新mat-table（用DataSource）的最佳方法吗？我希望页面不必刷新，从而丢失当前选择的行和任何排序。

我的编辑表在一个对话框中。当我回到餐桌时只是不知道该怎么办...

这是表格html：

    <mat-table id="mainTable" #table [dataSource]="dataSourceA" matSort>

      <ng-container matColumnDef="selection">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
            [indeterminate]="selection.hasValue() && !isAllSelected()">
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
            [checked]="selection.isSelected(row)">
          </mat-checkbox>
        </td>
      </ng-container>

      <ng-container matColumnDef="commonName">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Common Name</mat-header-cell>
        <mat-cell *matCellDef="let certdata">{{certdata.commonName}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="owner">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Owner</mat-header-cell>
        <mat-cell *matCellDef="let certdata">{{certdata.owner}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="expirationDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Expiration Date</mat-header-cell>
        <mat-cell *matCellDef="let certdata">{{certdata.expirationDate | date}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="environment">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Environment</mat-header-cell>
        <mat-cell *matCellDef="let certdata">{{certdata.environment}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="edit">
        <th mat-header-cell *matHeaderCellDef class="mat-column-edit"></th>
        <td mat-cell *matCellDef="let row">
          <button mat-raised-button (click)="openEditDialog(row)">Edit</button>
        </td>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumnsA"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumnsA;" matRipple class="element-row" [cdkDetailRow]="row"
        [cdkDetailRowTpl]="tpl"></mat-row>
    </mat-table>

这是我的组件代码：

openEditDialog(data) {
    const editDialogConfig = new MatDialogConfig();

    editDialogConfig.disableClose = true;
    editDialogConfig.autoFocus = true;
    editDialogConfig.width = "900px";

    editDialogConfig.data = data;

    const dialogRef = this.editDialog.open(EditDialogComponent, editDialogConfig);

    dialogRef.afterClosed().subscribe(result => {
      console.log("dialog closed");
      this.dialogData = result;
      console.log(this.dialogData);

      let headers = new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + this.authService.getToken()
      });
      let options = { headers: headers };

      this.http.post<CertData>(`http://localhost:8102/certtracker/certs/update`, this.dialogData, options)
        .subscribe(response => {
          console.log(response);
        });
    })
  }
}

Answer 1

好的，我不明白您的问题，但是如果您要避免在更新数据源并且要显示新行，进行编辑等操作时刷新页面。我实现了一个Database类：

export class DatabaseName {
  dataChange: BehaviorSubject<YourModel[]> = new BehaviorSubject<YourModel[]>([]);

  get data(): YourModel[] {
    return this.dataChange.value;
  }

  set data(value: YourModel[]) {
    this.dataChange.next(value);
  }

  constructor() { }

  addShareholder(shareholder: YourModel) {
    const copiedData = this.data.slice();
    copiedData.push(shareholder);
    this.dataChange.next(copiedData);
  }

  editShareholder(shareholder: YourModel, index: number) {
    const copiedData = this.data.slice();
    copiedData.splice(index, 1, shareholder);
    this.dataChange.next(copiedData);
  }

  deleteShareholder(index: number) {
    const copiedData = this.data.slice();
    copiedData.splice(index, 1);
    this.dataChange.next(copiedData);
  }
}

export class DataSourceName extends DataSource<YourModel> {

  constructor(private DBname: DatabaseName) {
    super();
  }


  connect(): Observable<YourModel[]> {
    return this.DBname.dataChange;
  }

  disconnect() { }
}

您必须使用BehaviorSubject，我在5个月前的示例中看到了这个神圣的代码

这是整个示例，这挽救了我的生命：https://github.com/marinantonio/angular-mat-table-crud

Angular Material：在编辑时更新数据源的最佳方法？

1 个答案: