使用NG-模型和NG-如果基於值，以顯示元件 - 角2

Question

在AngularJS

所以我用下列基於由模型捕獲的值，以顯示特定的形式的元素：

<fieldset class="full-width sm-padding"> 
       <label>Do you have any major medical conditions such as 
heart conditions, cancer or diabetes?</label> 
       <div class="inline-flex"> 
        <input type="radio" name="medicalCondition" value="yes" 
tabindex="16" ng-model="clientDetails.medicalCondition">Yes<br> 
       </div> 
       <div class="inline-flex"> 
        <input type="radio" name="medicalCondition" value="no" 
tabindex="17" ng-model="clientDetails.medicalCondition">No<br> 
       </div> 
      </fieldset> 


      <fieldset class="full-width sm-padding" ng- 
if="clientDetails.medicalCondition == 'yes'"> 
       <label>Are you currently taking any medication or do you 
have any other medical conditions? For example HBP, Cholesterol, Asthma, 
Depression? (Both lives if cover for couple)</label> 
       <div class="inline-flex"> 
        <input type="radio" name="otherMedicalCondition" 
value="yes" tabindex="18" ng- 
model="clientDetails.otherMedicalCondition">Yes<br> 
       </div> 
       <div class="inline-flex"> 
        <input type="radio" name="otherMedicalCondition" 
value="no" tabindex="19" ng- 
model="clientDetails.otherMedicalCondition">No<br> 
       </div> 
      </fieldset> 

如何在Angular 2中做同樣的事情？

是否嘗試過這一點，但不工作：

<fieldset class="full-width sm-padding"> 
       <label>Do you smoke?</label> 
       <div class="inline-flex"> 
        <input type="radio" name="smoker" value="yes" 
tabindex="12" [(ngModel)] = "clientDetails.smoker">Yes<br> 
       </div> 
       <div class="inline-flex"> 
        <input type="radio" name="smoker" value="no" tabindex="13" [(ngModel)] = "clientDetails.smoker">No<br> 
       </div> 
      </fieldset> 

      <div class="full-width flex" *ngIf="clientDetails.smoker === 
'Yes'"> 
       <fieldset class="one-quarter sm-padding"> 
        <label>What do you smoke?</label> 
        <input list="whatDoYouSmoke" name="whatDoYouSmoke" 
tabindex="14"> 
        <datalist id="whatDoYouSmoke"> 
         <option value="Cigarettes"> 
         <option value="Cigars"> 
         <option value="Pipe"> 
         <option value="E-Cigs"> 
         <option value="Other"> 
        </datalist> 
       </fieldset> 
       <fieldset class="one-quarter sm-padding"> 
        <label>How many per day?</label> 
        <input type="number" min="0" name="howManySmokesPerDay" 
tabindex="15"> 
       </fieldset> 
      </div> 

我在做什麼錯？

已經嘗試了很多不同的選擇，但不能完全實現它的工作！

感謝

Answer 1

我能看到的唯一的事情是，你輸入[(ngModel)] = ""，嘗試沒有像空間：[(ngModel)]=""。還注意到在你的*ngIf="clientDetails.smoker === 'Yes'"中，試着用yes中的'y'作爲：*ngIf="clientDetails.smoker === 'yes'"。由於您在單選按鈕中將值設置爲「是」，而不是「是」。

Answer 2

Angular版本存在一個案例問題。第一個「是」開始於一個較低的情況下，y和第二「是」用大寫字母Y.

Answer 3

對於任何人在那裏尋找解決這個問題，我最終做了以下內容：

<fieldset class="full-width sm-padding"> 
       <label>Do you smoke?</label> 
       <div class="inline-flex"> 
        <input type="radio" name="smoker" [(ngModel)]="smoker" 
[value]="true" [checked]="smoker" /> Yes<br> 
       </div> 
       <div class="inline-flex"> 
        <input type="radio" name="smoker" [(ngModel)]="smoker" 
[value]="false" [checked]="!smoker" /> No<br> 
       </div> 
      </fieldset> 

      <div class="full-width flex" *ngIf="smoker"> 
       <fieldset class="one-quarter sm-padding"> 
        <label>What do you smoke?</label> 
        <input list="whatDoYouSmoke" name="whatDoYouSmoke" tabindex="14"> 
        <datalist id="whatDoYouSmoke"> 
         <option value="Cigarettes"> 
         <option value="Cigars"> 
         <option value="Pipe"> 
         <option value="E-Cigs"> 
         <option value="Other"> 
        </datalist> 
       </fieldset> 
       <fieldset class="one-quarter sm-padding"> 
        <label>How many per day?</label> 
        <input type="number" min="0" name="howManySmokesPerDay" 
tabindex="15"> 
       </fieldset> 
      </div>