В настоящее время я создаю приложение, которое использует информацию, хранящуюся в локальном хранилище, когда пользователь проходит через приложение.
Когда они дойдут до одного конкретного вопроса, им будет показан другой текст и варианты в зависимости от выбора, который они выбирают. Если они выберут «одного» кандидата, на следующем шаге им будет показано одно поле ввода. Если они выберут «двух» кандидатов, им будут показаны два поля ввода.
Мне удалось получить это в определенной степени, просто это не работает так, как я этого ожидаю. Он будет использовать значение в локальном хранилище только после перезагрузки приложения, а не во время текущего сеанса.
Вот грубый пример. Если я никогда не использовал приложение раньше, и в моем локальном хранилище ничего нет, и я выбираю «двух» кандидатов:
Скриншот один
На следующем шаге он показывает мне только одно поле (по умолчанию, но должно быть два, потому что это то, что я выбрал) и не заполняет текстовый текст:
Скриншот Два
Теперь, если я перезагрузлю приложение и вернусь к тому же вопросу и на этот раз выберу «один»:
Скриншот Три
На этот раз будет показан текст, связанный с двумя пользователями и двумя полями ввода, хотя я выбрал «один»:
Скриншот четыре
Похоже, что у него есть «задержка» (из-за отсутствия лучшего слова), когда он будет показывать только выбор, сделанный во время последней сессии.
Я пробовал несколько вариантов решения этой проблемы, но все они, похоже, дают мне один и тот же результат, и я уже осмотрел 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, поэтому могу пойти по совершенно неправильному пути.
Любая помощь будет принята с благодарностью.