具有状态的垫子旋转器即使在状态改变后也保持旋转

Question

I'm using a mat-spinner to rotate till I get the data from the service to display in a table. Once the data is received, I change the condition and mat-spinner should stop rotating. However, it takes a lot of time after the data is received from the service to stop rotating.

This is my existing code

In table.html

<mat-card *ngIf="isLoading2 === true; else elseBlock" class = "snapshot-spinner">
            <mat-progress-spinner color="primary" mode="indeterminate">
            </mat-progress-spinner>
        </mat-card>

    <ng-template #elseBlock class="container" style="padding-bottom: 10px; padding-top: 20px">
        <table class='reports'>
            <tr>
                <th class="reports-data">Data1 : {{ SnapshotData.Data1 }}</th>
                <th class="reports-data">Data2 : {{ SnapshotData.Data2 }} </th>
                <th class="reports-data">Data3 : {{ SnapshotData.Data3 }}</th>
                <th class="reports-data">Data4 : {{ SnapshotData.Data4 }}</th>
            </tr>
        </table>
    </ng-template>

In table.ts

this.messageService.getSnapshotDetails().subscribe(
      response => {
        this.SnapshotData = response;
        console.log(this.SnapshotData);
        this.isLoading2 = false;
        console.log(this.isLoading2);
      },
      errorResponse => { console.log(errorResponse), this.isLoading2 = false },

    );

Why does the mat-spinner take so much time to stop even after the value of isLoading2 changes to false? How do I solve this?

Answer 1

I don't think you need to add the ===true. Did you try to write it just like this?

 <mat-card *ngIf="isLoading2 === true; else elseBlock" class = "snapshot-spinner">