Using async pipe: Has any data loaded yet?-CodePudding

I'm using the async pipe to load data returned from an Observable directly into my template.

public myData$ = Observable<DataResponse[]>;
ngOnInit(): void {
    this.myData$ = this.myService.getData();
}

It loads just fine into my template:

<ng-container *ngFor='let data of dataStatus$ | async'>

But, i inherited a custom progress bar that shows until data is loaded via an attribute:

<my-progress-bar [showProgress]='???'

So, under the showProgress attribute I've got to determine when to shut off the progress bar. I know that all docs point to using the ;else #templateLiteral. I've tried accessing the complete method of the Observable and also using

[showProgress]='dataStatus$'

...but that's not working either. Is there some property of the Observable I can use to pass into the progress component? Thanks for any helpful tips.

<my-progress-bar [showProgress]='???'>
    <table>
        <ng-container *ngFor='let data of dataStatus$ | async'>
            <tr *ngIf='!!data'>
                <td>/* all my stuff */</td>
            </tr>
        </ng-container>
    </table>
</my-progress-bar>

CodePudding user response：

Use a typical construction <ng-container *ngIf="{data:(dataStatus$ | async) as dataStatus}>

<ng-container *ngIf="{ data: (dataStatus$ | async) } as data">
  <div *ngIf="!data.data">loading...</div>
  <div *ngFor="let i of data.data">{{ i }}</div>
</ng-container>

CodePudding user response：

try this approach:

<my-progress-bar [showProgress]='!((dataStatus$ | async) as dataStatus)'>
    <table>
        <ng-container *ngFor='let data of dataStatus'>
            <tr *ngIf='!!data'>
                <td>/* all my stuff */</td>
            </tr>
        </ng-container>
    </table>
</my-progress-bar>