Проблема с использованием Angular, локального хранилища и NgIf

В настоящее время я создаю приложение, которое использует информацию, хранящуюся в локальном хранилище, когда пользователь работает с приложением.

Когда они доберутся до одного конкретного вопроса, им будут показаны разные тексты и варианты в зависимости от того, какой вариант они выбрали. Если они выберут «одного» заявителя, то на следующем шаге им будет показано одно поле ввода. Если они выберут «двух» кандидатов, им будут показаны два поля ввода.

Я смог получить это в определенной степени, просто это не работает именно так, как я ожидаю. Он будет использовать значение в локальном хранилище только после перезагрузки приложения, а не во время текущего сеанса.

Вот грубый пример. Если я никогда раньше не пользовался приложением и в моем локальном хранилище ничего нет и я выбираю "двух" претендентов:

Скриншот 1

На следующем шаге он показывает мне только одно поле (это значение по умолчанию, но их должно быть два, потому что это то, что я выбрал), и он не заполняет текстовый текст:

Скриншот 2

Теперь, если я перезагружу приложение и вернусь к тому же вопросу и на этот раз выберу «один»:

Скриншот 3

На этот раз он покажет текст, связанный с двумя пользователями и двумя полями ввода, хотя я выбрал «один»:

Скриншот четыре

Таким образом, у него есть «задержка» (из-за отсутствия лучшего слова), когда он показывает только выбор, сделанный на последнем сеансе.

Я пробовал несколько вариантов того, как решить эту проблему, но все они, похоже, дают мне один и тот же результат, и я уже просмотрел Stackoverflow и Google, чтобы узнать, есть ли у кого-нибудь похожая проблема, но я не смог найти все, что мне поможет.

Вот соответствующий код из моего component.html:

        <mat-step label = "Step 2" [stepControl] = "secondFormGroup">
            <form [formGroup] = "secondFormGroup">

                <div ng-controller = "step2">

                <h2>How many people are applying?</h2>

                <mat-button-toggle-group>
                    <div *ngFor = "let step2option of step2options">
                      <mat-button-toggle (click) = "getStep2Val(Oname);" class = "btn btn-primary step-button" id = "{{step2option.id}}" [ngClass] = "status ? 'selected' : ''"><span #Oname>{{step2option.text}}</span></mat-button-toggle>
                    </div>
                </mat-button-toggle-group>

                <div>You chose <strong>{{ selectedStep2option }}!</strong></div>

                <button mat-stroked-button (click) = "goToNext()" class = "btn btn-secondary continue-btn" [disabled] = "selectedStep2option === 'none'">Continue</button>

              </div>

              </form>
        </mat-step>

        <mat-step label = "Step 3" [stepControl] = "thirdFormGroup">
            <form [formGroup] = "thirdFormGroup">
                <div ng-controller = "step3">
                    <h2>What <span *ngIf = "users === 'One'">{{text1app}}</span> <span *ngIf = "users === 'Two'">{{text2app}}</span>?</h2>

                    <div class = "input-group" *ngIf = "users == 'One' || 'Two'" >
                      <p>Applicant 1</p>
                      <span class = "input-group-addon">£</span>
                      <input type = "number" (change) = "getStep3Val()" (keyup) = "getStep3Val()" [(ngModel)] = "app1income" [ngModelOptions] = "{standalone: true}" id = "step3appVal" min = "0" step = "500" data-number-to-fixed = "2" data-number-stepfactor = "500" />
                      {{app1income}}
                    </div>

                    <div class = "input-group" *ngIf = "users == 'Two'">
                      <p>Applicant 2</p>
                      <span class = "input-group-addon">£</span>
                      <input type = "number" (change) = "getStep4Val()" (keyup) = "getStep4Val()" [(ngModel)] = "app2income" [ngModelOptions] = "{standalone: true}" id = "step4appVal" min = "0" step = "500" data-number-to-fixed = "2" data-number-stepfactor = "500" />
                      {{app2income}}
                    </div>

                    <button mat-stroked-button (click) = "goToNext()" class = "btn btn-secondary continue-btn" [disabled] = "app1income === 0">Continue</button>

                  </div>
            </form>
        </mat-step>

И из моего component.ts:

  users: string;

  getUsers() {
    this.users = this.readLocalStorageValue('Number of applicants');
  }

  readLocalStorageValue(key: string): string {
    return localStorage.getItem(key);
  }

  selectedStep2option: string = 'none';

  step2options = [
    {
      text: 'One',
      id: 'step2one'
    },
    {
      text: 'Two',
      id: 'step2two'
    }
  ];

  getStep2Val (Oname: any) {
    this.selectedStep2option = Oname.textContent;
    localStorage.setItem('Number of applicants',  Oname.textContent);
  }

  text1app: string = 'is your income';
  text2app: string = 'are your incomes';

На данный момент я не могу понять, почему такая задержка в выборе, который делает пользователь. Кто-нибудь знает, почему это может быть сделано? Или это совершенно многословный способ сделать это, и мне не хватает гораздо более простого способа иметь эту условную логику. Я довольно новичок в Angular, поэтому я могу пойти по совершенно неправильному пути.

Любая помощь будет принята с благодарностью.