Ionic 4 Correct way to show Loading, No records and data block

问题

Here's the problem. I have three states of almost all the pages in my app. 1. Loading (where I want to show spinner within the page and for that I have created a component already) 2. No Records Found ( An image in center of the page and I have a component for this as well ) 3. Data loading and my actual content without any wrapper around that which can mess up the design.

Thats how I am doing this currently which doesnt look great on every page.

<app-spinner *ngIf="!data; else page_content"></app-spinner>
<ng-template #page_content>
<ng-container *ngIf="data.length; else no_record">
My Content goes here
</ng-container>
</ng-template>
<ng-template #no_record><app-no-record></app-no-record></ng-template>

Another way I can do is this but I dont want to repeat my checks again and again.

<app-spinner *ngIf="!data;"></app-spinner>
<app-no-record *ngIf="data && !data.length;"></app-no-record>
<ng-container *ngIf="data && data.length"></ng-container>

Is there any other way I can achieve this same functionality but with better looking code. Thanks

回答1:

Advertisement: This is a response in Angular (I suppose can be inspiration for Ionic)

You can create an operator, see this SO

Well, change the operator to send 1 when start loading, -1 if finalize without no data and 0 if finalize with data:

The operator:

export const prepare = <T>(callback: () => void) => {
    return (source: Observable<T>): Observable<T> =>
        defer(() => {
            callback();
            return source;
        });
};

export const indicate = <T>(indicator: Subject<any>) => {
    let alive = true;
  let noData=false;
    return (source: Observable<T>): Observable<T> =>
        source.pipe(
            prepare(() =>
                timer(500)
                    .pipe(
                        takeWhile(() => alive),
                        take(1)
                    )
                    .subscribe(() => {
                        indicator.next(1);
                    })
            ),
      tap(res=>{
        noData=(!res || (Array.isArray(res) && res.length<=0))
      }),
            finalize(() => {
                alive = false;
                indicator.next(noData?-1:0);
            })
        );
};

export const toClass = <T>(ClassType: { new(): T }) => (
    source: Observable<T>
) => source.pipe(map(val => Object.assign(new ClassType(), val)));

the loading component:

@Component({
  selector: 'app-loading',
  template:`
  <div *ngIf="dataService.loading$ | async as response">
    <div class="modal" (click)="dataService.loading$.next(0)">
        <div class="modal-content">
            <p *ngIf="response==1">Loading...</p>
            <p *ngIf="response==-1">Empty</p>
        </div>
    </div>
</div>
  `,
  styleUrls: [ './loading.component.css' ]
})
export class LoadingComponent  {
  constructor(public dataService:DataService){}
}

See how close the modal using dataService.loading$.next(0) and how I declared as public my dataService in the constructor

I make a simple example of use

<button (click)="loadData()">load</button>
<div>
    {{data}}
</div>
<app-loading></app-loading>

And a simple service that simulate a call, return random null or the date time

export class DataService {
  loading$ = new Subject<any>()
  getData():Observable<any>
  {
    const observable=of(Math.random()<.5?
              'New Data at '+new Date():
               null
    ).pipe(delay(1000))

    return observable.pipe(
      indicate(this.loading$))
  }
}

You can see the stackblitz, You see the "loading", then, some times you'll see that is empty, and another time the "loading" close.

来源：https://stackoverflow.com/questions/60769941/ionic-4-correct-way-to-show-loading-no-records-and-data-block

标签

angular

ionic-framework

ionic4

angular8