Question

我当前正在构建一个应用程序，该应用程序利用用户在应用程序中的工作方式来利用本地存储中存储的信息。

当他们遇到一个特定的问题时，将根据选择的内容为他们显示不同的文本和选项。如果他们选择“一个”申请人，那么在接下来的步骤中，他们将显示一个输入字段。如果他们选择“两个”申请人，则将显示两个输入字段。

我已经能够在某种程度上做到这一点，只是它不能完全按照我的预期工作。它将仅在重新加载应用程序后使用本地存储中的值，而不是在当前会话期间使用

。

这是一个粗糙的例子。如果我以前从未使用过该应用程序，并且本地存储中没有任何内容，则选择“两个”申请人：

Screenshot One

在随后的步骤中，它仅显示一个字段（这是默认字段，但应该有两个字段，因为这是我选择的字段），并且没有填充文本：

Screenshot Two

现在，如果我重新加载应用程序并回到相同的问题，这次选择“一个”：

Screenshot Three

这一次，即使我选择了“一个”，它也会显示与两个用户和两个输入字段关联的文本：

Screenshot Four

因此，它似乎有一个“延迟”（需要一个更好的词），它只会显示上次会话的选择。

我已经尝试了几种解决方法，但是它们似乎都给了我相同的结果，我已经环顾了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的新手，所以我可能在这里走错了方向。

任何帮助将不胜感激。

Answer 1

没关系。我想到了。这是在错误的位置调用我的getUsers（）函数的简单情况。

应该在这里

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

相反，它处于更早的步骤。

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

使用Angular，本地存储和NgIf

1 个答案: