Присвойте значение в Local Storage полю FormControl

Question

Я использую структуру таблицы на странице, которую я сделал, и я использую структуру подкачки при отображении данных в таблице. Данные в таблицу поступают из постраничной базы данных. Я хочу перейти с третьей страницы, например, когда я go, на другую страницу, когда я нахожусь на третьей странице, и вернуться на страницу, где находится моя таблица. Я сохраняю номер страницы в локальном хранилище, но не могу go туда, где я остаюсь, установив данные, сохраненные в локальном хранилище, в поле FormControl. Пока OnPageChange (evt) не работает, мое значение в Локальном хранилище устанавливается на единицу, когда метод работает, когда выбрана страница, которую я выбрал

.ts

this.filterForm = this.formBuilder.group({
    ...
    page: new FormControl(+localStorage.getItem("page") || 1),
    ...
})
this.filterForm.get("page").valueChanges.pipe(
  tap(v => {
    localStorage.setItem('page', v);
  })
).subscribe();
...
clearFilters(){
    this.filterForm.get("pageSize").valueChanges.subscribe();
    this.filterForm
    .valueChanges
    .pipe(this.pipeFn(v => of(v)))
    .subscribe(_ => {
        let v = this.filterForm.getRawValue();
        ...
        v.sortColumns = [v.sortColumns || "applicationDate desc"];
        let request = <QueryAppealRequest>{
        pagination: {
            page: this.filterForm.get("page").value,
            rowsPerPage: this.filterForm.get("pageSize").value
         },
         data: v
       };
       this._fetchData();
    this.apiClient.filterAppeals(request)
      .subscribe(response => {
        if (response.error.code === 0) {
          this.responsePagination = of(response.pagination);
          this.toplamTalep = response.pagination.rowCount
          this.filteredData = of(response.data);
        }
        else {
          Swal.fire({
            type: 'error',
            confirmButtonText: 'Kapat',
            confirmButtonClass: 'btn btn-confirm mt-2',
            title: response.error.message
          });
        }
      }, error => {
        Swal.fire({
          type: 'warning',
          confirmButtonText: 'Kapat',
          confirmButtonClass: 'btn btn-confirm mt-2',
          title: error
        });
      });
  },
}
onPageChange(evt) {
    this.showSpinner('sp6');
    this.filterForm.get("page").setValue(evt);
    this.hideSpinner('sp6');
}
private _fetchData() {
    // Tickets Card Data
    this.apiClient.getAppealsSummary()
    .subscribe(response => {
        if (response.error.code === 0) {
          this.cardData = cardData.map((v, i) => {
          v.tickets = response.data.filter(r => r.status === i)[0].rowCount;
           return v;
          });
         }
         else {
           response.error.message
         }
       })
  }

. html

<div class="col-12 col-lg-8 justify-content-between align-items-center text-center">
            <div class="inline-block">
              <ul class="pagination pagination-rounded mb-0 d-inline-block" *ngIf="responsePagination | async; let pagination">
                <ngb-pagination [collectionSize]="pagination.rowCount"
                                [pageSize]="pagination.rowsPerPage"
                                (pageChange)="onPageChange($event)"
                                [(page)]="page"
                                *ngIf="pagination.pageCount > 1"
                                [maxSize]="3"
                                [boundaryLinks]="true">
                </ngb-pagination>
              </ul>
            </div>
          </div>

Answer 1

Вам нужно исправить свой код в этом разделе, потому что вы устанавливаете одно значение с помощью ключа «страница» в локальном хранилище только в этом разделе.

    this.filterForm.get("page").valueChanges.pipe(
      tap(v => {
        console.info('v', v); // on entering to this page maybe v is 1
        const pageStored = localStorage.getItem('page'); // maybe 3 is stored at this moment
        if (!pageStored) { 
          // set item on local storage when pageStored is a falsy value
          localStorage.setItem('page', v);
        } else {
          console.info('page stored', pageStored); // last value stored on local storage
        }

      })
    ).subscribe();