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

在AngularJS

所以我用下列基于由模型捕获的值，以显示特定的形式的元素：使用NG-模型和NG-如果基于值，以显示元件 - 角2

<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>

我在做什么错？

已经尝试了很多不同的选择，但不能完全实现它的工作！

感谢

来源

2017-10-10 DBoi

这是一个有趣的问题，我经常遇到'* ngIf'的问题，我放弃了试图了解它并转而使用'[hidden] =“”'代替。我仍然不知道'* ngIf'如何工作 – Felype

我如何在上面的代码中使用它？ [hidden] =“smoker.yes || smoker.no”？ – DBoi

'[hidden] =“吸烟者==='不'''。虽然，你在这里有一些真正相关的答案。 – Felype

我能看到的唯一的事情是，你输入[(ngModel)] = ""，尝试没有像空间：[(ngModel)]=""。还注意到在你的*ngIf="clientDetails.smoker === 'Yes'"中，试着用yes中的'y'作为：*ngIf="clientDetails.smoker === 'yes'"。由于您在单选按钮中将值设置为“是”，而不是“是”。

来源

2017-10-10 16:03:11

Angular版本存在一个案例问题。第一个“是”开始于一个较低的情况下，y和第二“是”用大写字母Y.

来源

2017-10-10 22:57:51

对于任何人在那里寻找解决这个问题，我最终做了以下内容：

<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>

来源

2017-10-11 09:59:40 DBoi

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

回答

相关问题