具有狀態的墊子旋轉器即使在狀態改變后也保持旋轉

Question

我正在使用mat-spinner旋轉，直到我從服務中獲取數據以顯示在表格中。 一旦收到數據，我就改變了條件，mat-spinner應該停止旋轉。 但是，從服務接收數據以停止旋轉需要花費很多時間。

這是我現有的代碼

在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>

在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 },

    );

為什么即使在isLoading2的值變為false之后，mat-spinner也會花費很多時間來停止？ 我該如何解決這個問題？

Answer 1

我認為你不需要添加=== true。 你試着像這樣寫嗎？

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