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

Question

一些注意事项：

我的目标是实现一些“丢弃”和“保存”更改类型的功能。
“companyService”服务调用一个 api 获取顶部的“X” 来自数据库的公司（在本例中为 5 个）。
table 通过 DataSource 实例填充。
此应用最终会投入生产。

因此用户将能够从下拉菜单中切换 on/off 按钮和 select“允许”或“拒绝”。在用户与这些按钮交互时，我想在保存按钮旁边显示一些文本，说明有未保存的更改。但我似乎无法弄清楚的部分是如何处理 Discard Changes 按钮上的点击事件，并在用户进行一些更改后将 table 中的数据“重置”回其初始状态。我只是感到困惑，因为 table 的数据源绑定到服务器上的数据库。

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

[![][1]][1]

我的组件 class 引用此 CompanyDataSource class 来填充 table。

公司配置-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() 从服务器重新获取数据吗？这应该将 table 替换为数据库具有的值。

如果由于某种原因这不起作用，另一个想法是跟踪原始数据，然后将网格重置为该原始数据。

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);
    }
}

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

How can I refresh Angular Material Table data back to it's initial state within the page?

reset

angular-material

angular

mat-table