删除后如何在同一选项卡上重新加载

问题描述 投票：0回答：1

我的页面上有两个选项卡，当我从第二个选项卡中删除某些内容时，页面会重新加载并返回到第一个选项卡。我需要有关如何在删除后将其保留在第二个选项卡上的帮助。

这是选项卡组的 html：

<div class="card-header" *ngIf="!loading">
<mat-tab-group (selectedTabChange)="changeActiveTab($event)">
    <mat-tab *ngFor="let tab of topTabs" [label]="tab">
    </mat-tab>
</mat-tab-group>
</div>

删除是菜单上的一个操作，它在单击事件上调用删除函数

 <mat-menu #rowActions>
                    <button mat-menu-item (click)="navigate(['/app/violations/detail/' 
      + violation.id])">View
                    </button>
                    <button *ngIf="hasWriteAccess" mat-menu-item 
      (click)="deleteViolation(violation)">Delete
                    </button>
                </mat-menu>

打字稿

 export class UnitViolationListComponent implements OnInit, 
    AfterViewInit
  {
      @Input() unitId: number = null;
      @Input() unit: Unit;

  searchValue: string = '';

  // Tabs
  port class UnitViolationListComponent implements OnInit, 
  AfterViewInit
 {
 @Input() unitId: number = null;
 @Input() unit: Unit;

 searchValue: string = '';

// Tabs
activeTab: string = 'All Outstanding';
topTabs: string [] = [
    'All Outstanding',
    'Completed',
];

downloadingPdf: boolean = false;

tags: any[] = [];
unitTags: any[] = [];
unitOrgTags: Tag[];

completeViolations: ViolationStatement[] = [];
notCompleteViolations: ViolationStatement[] = [];
violations: ViolationStatement[] = [];

tableDataSource: MatTableDataSource<ViolationStatement> = new 
                 MatTableDataSource<ViolationStatement>();
displayedColumns: string[] = [
    'unit',
    'title',
    'createdAt',
    'resolutionTime',
    'completedTime',
    'actions',
];
pageSizeOptions: number[] = [
    25,
    50,
    100,
    200,
];
orgViolationStatuses: ViolationStatus[] = [];
@ViewChild(MatTable) table: MatTable<any>;
@ViewChild(MatPaginator) matpaginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

// Component State
uploading: boolean = false;
loading: boolean = true;

hasWriteAccess: boolean = false;

_jwt: JwtLegFiClaims;

constructor(
        private _dialog: MatDialog,
        private _fb: FormBuilder,
        private _growler: GrowlerService,
        private _router: Router,
        private _scrollService: ScrollService,
        private _violationsService: ViolationsService,
        private _csvExportService: CsvExportService,
) {
}

async ngOnInit() {
    this._scrollService.scrollToTop();
    this._jwt = LegFiJwtService.read();

    this.hasWriteAccess = 
   LegFiJwtService.doesUserHaveModulePermission(
            'violation',
            true,
    );

    if (this.unitId) {
        this.displayedColumns = this.displayedColumns.filter(c => 
 c !== 'unit');
    }

    if (this._jwt !== null) {
        if (this._jwt.superUser || this._jwt.admin) {
            this.hasWriteAccess = true;
        }
    }

    await this.getOrgViolationStatuses();
    this.getUnitViolations();
}

ngAfterViewInit() {
    this.tableDataSource.sort = this.sort;
    this.tableDataSource.paginator = this.matpaginator;

    const originalFilterFunction = 
    this.tableDataSource.filterPredicate;
    this.tableDataSource.filterPredicate = (data: 
     ViolationStatement) => {
        // and lastly filter on the text string if provided
        if (originalFilterFunction(data.unit as any, 
         this.searchValue)) {
            return true;
        }

        return originalFilterFunction(data, this.searchValue);
    };
}

/** Get the available statuses for violations for this org */
async getOrgViolationStatuses() {
    await this._violationsService
            .getViolationStatusesPromise()
            .then(
                    async (statuses: ViolationStatus[]) => {
                        this.orgViolationStatuses = statuses;
                        if (this.orgViolationStatuses.length) {
                            
        this.displayedColumns.unshift('status');

                            // redo the top tabs w custom status
                            this.topTabs = [
                                'All Outstanding',
                                ...this.orgViolationStatuses.map(s 
        => s.title),
                                'Completed',
                            ];
                        }
                    },
                    (err: any) => {
                        console.error('cant get template: ', err);
                    },
            );
}

parseTableDataByStatus() {
    if (this.activeTab === 'Completed') {
        this.tableDataSource.data = this.completeViolations;
    } else if (this.activeTab === 'All Outstanding') {
        this.tableDataSource.data = this.notCompleteViolations;
    } else if (this.orgViolationStatuses.length) {
        this.tableDataSource.data = 
      this.notCompleteViolations.filter(s => {
            return s.status === this.activeTab;
        });
    }
   }

  getUnitViolations() {
     this.loading = true;

     this._violationsService
            .getUnitViolations(null, this.unitId)
            .pipe(untilDestroyed(this))
            .subscribe(async (violations: ViolationStatement[]) => 
   {
                this.completeViolations = violations.filter(v => 
       v.completedTime);
                this.notCompleteViolations = violations.filter(v 
   => !v.completedTime);

                this.parseTableDataByStatus();

                this.updateFilter();
                this.loading = false;
            }, () => {
                this.loading = false;
                this._growler.error('Error', 'There was an error 
      loading violations for this unit.');
            });
}

/**
 * Trigger a re-filter when any of the things we filter by change
 */
updateFilter() {
    this.tableDataSource.filter = this.searchValue;
    if (this.tags.length > 0) {
        this.tableDataSource.filter += '//TAGS//';
    }
    if (this.unitTags.length > 0) {
        this.tableDataSource.filter += '//UNITTAGS//';
    }
}

changeActiveTab(event: MatTabChangeEvent) {
    this.activeTab = event.tab.textLabel;

    // hide the 'completed' column in the table if we are not on 
     the 'completed' tab
    if (this.activeTab === 'Completed') {
        this.displayedColumns = [
            'unit',
            'title',
            'createdAt',
            'resolutionTime',
            'completedTime',
            'actions',
        ];
    } else {
        this.displayedColumns = [
            'unit',
            'title',
            'createdAt',
            'resolutionTime',
            'actions',
        ];
    }

    if (this.unitId) {
        this.displayedColumns = this.displayedColumns.filter(c => 
   c !== 'unit');
    }

    if (this.orgViolationStatuses.length) {
        this.displayedColumns.unshift('status');
    }

    this.parseTableDataByStatus();
    this.updateFilter();
}

/**
 * Navigate to Request Detail Page
 * @param {any[]} routerLink
 */
navigate(routerLink: any[]) {
    if (this._jwt !== null) {
        // noinspection JSIgnoredPromiseFromCall
        this._router.navigate(routerLink);
    }
}

deleteViolation(violation: ViolationStatement) {
    const baseDialog = 
  this._dialog.open(ConfirmDeleteModalComponent, {
        width: MatDialogSizes.XS,
        data: 'violation',
    });

    baseDialog.afterClosed().subscribe((confirmation: boolean) => 
  {
        if (confirmation) {
            this._violationsService
                    .deleteViolation([violation.id])
                    .subscribe(() => {
                        this.getUnitViolations();
                    });
        }
    });
 }

exportCsv() {
    const c = this.tableDataSource.filteredData.map((v: 
  ViolationStatement) => {
        return new ViolationExportListItem(v);
    });

    const options = {
        headers: [
            'status',
            'unit',
            'title',
            'message',
            'created',
            'resolveBy',
            'completed',
            'address',
            'city',
            'state',
            'zip',
            'comments',
        ],
        showLabels: true,
    };

    this._csvExportService.generateCsv(c, 'violation-export', 
  options);
}

exportPdf() {
    this.downloadingPdf = true;
    this._violationsService.getUnitViolationListPdf(this.unitId, 
    this.activeTab)
            .pipe(untilDestroyed(this))
            .subscribe(
                    response => {
                        
      this._csvExportService.downloadFile(response, (this.unitId
                                ? this.unitId + '-'
                                : '') + this.activeTab + '- 
          violations.pdf', 'application/pdf');

                        this.downloadingPdf = false;
                    },
                    () => {
                        this.downloadingPdf = false;
                    },
            );
}

/**
 * Handle Toggle of Modals
 * @param {boolean} state
 * @param {string} modal
 */
toggleModal(state: boolean, modal: string) {
    this[modal] = state;
  }

}

这是可以在TS中的删除功能上完成的事情还是还需要更多？这就是我需要帮助的地方。

html angular typescript
1个回答
0
投票

当使用 

ngIf
将元素切换到视图时，当条件为 
false
时，它会被完全删除，与使用 CSS 隐藏元素（reference）不同。在您的代码中，在 getUnitViolations
 函数内部调用
deleteViolation
，然后重置
loading
 标志，导致您的选项卡组从 DOM 中删除，然后重新添加。

一些选项是重构如何处理 UI 中的加载或在选项卡组上设置

[selectedIndex][2]

 来控制显示哪个选项卡。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.