如何将Angular Material Table数据刷新回页面内的初始状态？

Question

一些注意事项：

• 我的目标是实现一些“丢弃”和“保存”更改功能类型。
• “ companyService”服务调用一个API，该API提取顶部的“ X”公司（在这种情况下为5）来自数据库。
• 通过数据源实例填充表。
• 此应用程序最终将投入生产。

因此，用户将能够切换开/关按钮，并从下拉菜单中选择“允许”或“拒绝”。当用户与这些按钮进行交互时，我想在“保存”按钮旁边显示一些文本，表示未保存的更改。但是我似乎无法弄清的部分是如何处理“放弃更改”按钮上的click事件，以及在用户进行某些更改后将表中的数据“重置”为初始状态。我只是感到困惑，因为表的数据源绑定到服务器上的数据库。

如果您可以给我有关使用DataSource的具体建议，或者只是指出正确的方向，将不胜感激！

我的组件类引用此CompanyDataSource类来填充表。

company-config-table.component.ts

HTML代码

<table mat-table #companyTable [trackBy]="trackByIndex" [dataSource]="dataSource" matSort class="mat-elevation-z8">

        <!-- Client ID Column -->
        <ng-container matColumnDef="clientId">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Client ID </th>
        <td mat-cell *matCellDef="let company">{{ company.clientId }}</td>
        <td mat-footer-cell *matFooterCellDef>
            <button mat-button (click)="onDiscardChanges()">Discard Changes</button>
        </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Company </th>
        <td mat-cell *matCellDef="let company"> {{ company.name }}</td>
        <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>


        <!-- Include Bsa Details Column -->
        <ng-container matColumnDef="includeBsaDetails">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Include BSA Details </th>
        <td mat-cell *matCellDef="let company">
            <mat-button-toggle-group #toggleGroup="matButtonToggleGroup">
                <mat-button-toggle class="on"   [checked]="company.includeBsaDetails"  [value]="true"  (change)="onIncludeBsaDetailsButtonToggleEvent($event, company)">ON</mat-button-toggle>
                <mat-button-toggle class="off"  [checked]="!company.includeBsaDetails" [value]="false" (change)="onIncludeBsaDetailsButtonToggleEvent($event, company)">OFF</mat-button-toggle>
            </mat-button-toggle-group>
        </td>
        <td mat-footer-cell *matFooterCellDef></td>
        </ng-container>

        <!-- Bsa Tool Permission Column -->
        <ng-container matColumnDef="bsaToolPermission">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Implicit BSA Permission </th>
        <td mat-cell *matCellDef="let company">
            <mat-form-field>
                <mat-select [(value)]="company.bsaToolPermission" (change)="onBsaToolPermissionSelectChangeEvent($event, company)">
                  <mat-option value="ALLOW">ALLOW</mat-option>
                  <mat-option value="DENY">DENY</mat-option>
                </mat-select>
            </mat-form-field>
        </td>
        <td mat-footer-cell *matFooterCellDef>

        </td>
        </ng-container>

        <!-- Auto Lock Confirmation Column -->
        <ng-container matColumnDef="autoLockConfirm">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Automated Lock Confirmation </th>
        <td mat-cell *matCellDef="let company">
            <mat-button-toggle-group #toggleGroup2="matButtonToggleGroup">
                <mat-button-toggle class="on"   [checked]="company.autoLockConfirm"  [value]="true"  (change)="onAutoLockConfirmButtonToggleEvent($event, company)">ON</mat-button-toggle>
                <mat-button-toggle class="off"  [checked]="!company.autoLockConfirm" [value]="false" (change)="onAutoLockConfirmButtonToggleEvent($event, company)">OFF</mat-button-toggle>
            </mat-button-toggle-group>
        </td>
        <td mat-footer-cell *matFooterCellDef>
            <button mat-button>Save Changes</button>
        </td>
        </ng-container>


        <!-- Table Configuration for rows, header, and footer -->
        <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
        <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
        <tr mat-footer-row *matFooterRowDef="columnsToDisplay"></tr>
    </table>

Answer 1

难道您不只是打电话给loadCompanies()从服务器中获取数据吗？那应该将表替换为数据库具有的值。

如果由于某种原因无法正常工作，另一个想法是跟踪原始数据，然后将网格重置为该原始数据。

class CompanyDataSource extends DataSource<any> {
    public companiesSubject = new BehaviorSubject<Company[]>([]);
    public originalData: Company[];
    constructor(private companyService: CompanyService) {
        super();
    }
    connect(): Observable<Company[]> {
        return this.companiesSubject.asObservable();
    }
    disconnect() {
        this.companiesSubject.complete();
    }
    loadCompanies(amount: number) {
        this.companyService.GetTopXCompanies(amount).subscribe((companies) => {
            this.originalData = companies;
            const deepCopyData = JSON.parse(JSON.stringify(companies));
            this.companiesSubject.next(deepCopyData);
        });
    }
    discardChanges() {
        const deepCopyData = JSON.parse(JSON.stringify(this.originalData));
        this.companiesSubject.next(deepCopyData);
    }
}