У меня есть следующие радиокнопки:
<div class="nextgen-goal-overall-radiobuttons pull-left">
<label class="nextgen-input-label">Overall Goal</label>
<div class="radio-button-item pull-left" *ngFor="let goalType of goalTypesRadioButton">
<p-radioButton class="nextgen-radio-button" name="{{goalType.id}}" value="{{goalType.id}}" label="{{goalType.description}}" [(ngModel)]="selectedGoalTypeId"></p-radioButton>
</div>
</div>
Когда я нажимаю любую радиокнопку, selectedGoalTypeId
обновляется с соответствующим значением.
Моя проблема здесь в том, что на моем HTML
у меня есть следующее условное divs
:
<div class="nextgen-input-container nextgen-goal-input pull-left">
<span *ngIf="selectedGoalTypeId === 1" class="goals-currency-icon">{{currencyFormat}}</span>
<label class="nextgen-input-label nextgen-target-group-label">{{selectedGoalTypeId}}</label>
<input class="nextgen-input" [class.nextgen-input-budget] = "selectedGoalTypeId === 1" type="number" pInputText placeholder="">
</div>
<div *ngIf="selectedGoalTypeId === 3" class="nextgen-goal-frequency-dropdown pull-left">
<label class="nextgen-input-label nextgen-target-group-label">Frequency</label>
<p-dropdown [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" dropdownIcon="fa fa-angle-down" class= "nextgen-dropdown" [options]="FrequencyLookup" [(ngModel)]="selectedFrequency" value="selectedFrequency"></p-dropdown>
</div>
На вопрос, если selectedGoalTypeId
равно 1 или 3, отображаются некоторые div или нет.
Проблема в том, что selectedGoalTypeId
обновлен правильно. Я поставил ярлык на HTML
, чтобы проверить. Но div не изменяются в соответствии с условиями, которые всегда отображаются одинаково, несмотря на значение selectedGoalTypeId
. Что мне здесь не хватает?