使用 Angular、本地存储和 NgIf 的问题

Question

我目前正在构建一个应用程序，该应用程序在用户使用该应用程序时使用存储在本地存储中的信息。

当他们回答一个特定问题时，会根据他们的选择显示不同的文本和选项 select。如果他们 select "one" 申请人，那么在接下来的步骤中，他们将看到一个输入字段。如果他们 select "two" 申请人，他们将看到两个输入字段。

我已经在一定程度上得到了这个，只是它并没有完全按照我的预期工作。它只会在应用程序重新加载后使用本地存储中的值，而不是在当前会话期间。

这是一个粗略的例子。如果我以前从未使用过该应用程序并且我的本地存储中没有任何内容并且我 select "two" 申请人：

Screenshot One

在后续步骤中，它只显示一个字段（这是默认设置，但应该有两个，因为那是我 selected 的）并且它没有填充文本文本：

Screenshot Two

现在，如果我重新加载应用程序并返回到相同的问题并且 select "one" 这次：

Screenshot Three

这一次，它将显示与两个用户相关的文本和两个输入字段，即使我 selected "one":

Screenshot Four

所以它似乎有一个 "delay"（需要一个更好的词），它只会显示上次会话中所做的选择。

我已经尝试了几种解决方法，但它们似乎都给我相同的结果，而且我已经查看了 Whosebug 和 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 的新手，所以我可能会走错路。

如有任何帮助，我们将不胜感激。

Answer 1

没关系。我想到了。这是一个简单的例子，我的 getUsers() 函数调用错误的地方。

它应该在这里：

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

而是在更早的步骤中。

典型的情况是，一旦您向某人寻求帮助，解决方案就会跳到您的面前。

使用 Angular、本地存储和 NgIf 的问题

Issue using Angular, Local Storage and NgIf

javascript

local-storage

angular-ng-if

angular