Угловой материал: лучший способ обновить источник данных при редактировании?

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