Ioni c 4 Список заморожен при получении данных - PullRequest
Новая
       23

Ioni c 4 Список заморожен при получении данных

0 голосов
/ 30 апреля 2020

У меня большой список на моем сервере, поэтому мы используем нумерацию страниц во внешнем интерфейсе. Список прокручивается, и ion бесконечный загрузчик делает запрос. Проблема в том, что пока запрос находится в состоянии ожидания, я не могу переместить свой список, он полностью заморожен.

В HTML Я использую В service.ts Я использую .next () для темы, которая прослушивается на странице push-ion-list

Работает нормально, но не должен зависать при ожидании данных сервера ...

page. html

<app-header
  (close)="close()"
  (searched)="search($event)"
  (showFilters)="showFilters(0)"
></app-header>
<ion-content #content>
  <ion-grid class="ion-no-padding" style="margin-bottom: 25vw;">
    <ion-list *ngIf="!isLoading && products" class="ion-no-padding">
      <ion-row class="ion-no-padding" style="padding: 0px !important;">
        <ion-item
          *ngFor="let p of products"
          style="width: 50%; padding: 0px !important;"
          lines="none"
          class="ion-no-padding"
        >
          <ion-card class="ion-no-padding" style="width: 100%;">
            <ion-thumbnail slot="start" (click)="open(p)">
              <ion-img
                [src]="getImage(p)"
              ></ion-img>
            </ion-thumbnail>

            <ion-card-header>
              <ion-card-subtitle
                (click)="open(p)"
                style="max-width: 35vw;"
                mode="md"
                >{{ p.title }}</ion-card-subtitle
              >
            </ion-card-header>
          </ion-card>
        </ion-item>
      </ion-row>
    </ion-list>

    <ion-infinite-scroll
      threshold="0px"
      [disabled]="endOfSearch"
      (ionInfinite)="loadData($event)"
    >
      <ion-infinite-scroll-content loadingSpinner="crescent" color="primary">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-grid>

  <button #btnTrigger style="display: none !important;"></button>
</ion-content>

page.ts 

  ngOnInit() {

    this.products = [];


    this.subsClothes = this.searchService.clothes.subscribe((clothes) => {
      if (clothes && clothes.length > 0) {
        for (let c of clothes) {
          this.products.push(c);
        }
      }
      this.isLoading = false;
    });

  }

   loadData(event) {
    // if (this.filtersOn) {
    this.searchService.getClothesWithFilter(this.lastSearch).subscribe(
      (r) => {
        event.target.complete();
        if (r.length === 0) {
          this.endOfSearch = true;
        }
      },
      (error) => {
        this.makeText('Algo deu errado');
      }
    );
  }

page.service.ts 

  private _clothes = new BehaviorSubject<any>(null);

  get clothes() {
    return this._clothes.asObservable();
  }

  getClothes() {
    let token;
    this.authService.user.pipe(take(1)).subscribe((u) => (token = u.token));
    return this.http
      .get<[]>(environment.urlApi + '/clothes?skip=' + this._skip, {
        headers: new HttpHeaders({
          Authorization: token,
        }),
      })
      .pipe(
        tap((r) => {
          this._clothes.next(r);
          this._skip += r.length;
        })
      );
  }
...