Как я могу перевести sh Angular данные таблицы материалов в исходное состояние на странице?

Question

Некоторые примечания:

• Моя цель состоит в том, чтобы реализовать некоторые функциональные возможности «отбросить» и «сохранить» изменения.
• Сервис «companyService» вызывает API, который выбирает top «X» компаний (в данном случае 5) из базы данных.
• Таблица заполняется через экземпляр DataSource.
• Это приложение в конечном итоге будет запущено в производство.

Таким образом, пользователь сможет переключать кнопки включения / выключения и выбирать «разрешать» или «отказывать» в раскрывающемся меню. При взаимодействии пользователя с этими кнопками я хотел бы отобразить текст рядом с кнопкой «Сохранить», в котором говорится о несохраненных изменениях. Но часть, которую я не могу понять, это то, как обрабатывать событие click на кнопке Discard Changes и «сбрасывать» данные в таблице обратно в исходное состояние после того, как пользователь вносит некоторые изменения. Я просто запутался, потому что источник данных таблицы привязан к базе данных на сервере.

Если бы вы могли дать мне конкретный c совет по использованию источника данных или просто указать мне правильное направление, это было бы очень ценно!

Мой класс компонентов ссылается на этот класс 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);
    }
}