primeNg p-RadioButton 值不改变 html

Question

我有以下单选按钮：

     <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 上贴了一些标签来检查。但是尽管selectedGoalTypeId 的值，div 不会根据它始终显示相同的条件进行更改。我在这里缺少什么？

Answer 1

在p-radioButton 中将value="{{goalType.id}}" 更改为[value]="goalType.id"

而且我认为*ngIf="selectedGoalTypeId === 1" 应该放在上面的 div 上，而不是放在 span 上

发布解决方案Here

PS：我猜goalType.id 和selectedGoalTypeId 都是number