NG-шаблон, если не работает с методом http

Question

у меня 2 формы. Я использую ng-template, чтобы перейти от формы A к форме B после нажатия кнопки «Далее», и кнопка «Далее» вызовет какой-либо метод в моем сервисе. Но дело 1 не работает

В файле my-app.component. html

    <ng-template [ngIf]="showFormA" [ngIfElse]="anotherForm">
        <div class="form-group">
               ....
        </div>
         <button (click)="onClick()">Next</button>
    </ng-template>

    <ng-template #anotherForm >
        <div class="form-group">
               ABC
        </div>
    </ng-template>

У меня есть 2 дела в файле my-app. component.ts

case 1: не работает в первый раз, нажмите кнопку (во второй раз)

Я вызываю какой-то метод в моем сервисе, который возвращает http.post ()

onClick() {
   // method: Observable<any>       
    this.service
        .method()
        .subscribe((_) => {
            this.showFormA= false;

        });
}

case 2: все работает

onClick() {
    const source = of(1);
    source.subscribe((_) => {
        this.showFormA= false;
    });
}