javascript - Angular:コンポーネントテンプレートが両方の条件ステートメントを点滅させないようにする方法は?

Question

コンポーネントの初期化後に条件が変更されたときに、コンポーネント テンプレートが両方の条件ステートメントをフラッシュしないようにしようとしています。

私のアプリケーションはトークンを受け取り、その有効性に従ってテンプレートに必要なコンテンツを表示します。問題は、トークンが API に送信され、応答するまでコンポーネントが既に初期化されているため、デフォルトのブール値を取得することです。トークンが有効な場合、ブール値は true であるため、テンプレートは両方の条件ステートメントを 1 秒間表示し、else ステートメントを非表示にします。

// template.html
<ng-container *ngIf="isTokenValid; else tokenIsInvalid">
  Token is valid content...
</ng-container>
<ng-template #tokenIsInvalid>
  Token is invalid content...
</ng-template>


// component.ts
...
isTokenValid: boolean = false; // Initialized to false by default
...
ngOnInit(){
  // Subscribe to the auth service to validate the provided token
  this.authService.validateToken(token).subscribe((res: any) => {
    if (res.success) { // If the API call was successful
      this.isTokenValid = true; // The token is valid so we change the boolean
      ...
    }
  });
}

望ましい結果は、API 呼び出しが完了するまで待機し、最終的なブール値に従って正しいコンテンツを表示するコンポーネント テンプレートです。