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'"中，请尝试使用一点＆＃39;在是：*ngIf="clientDetails.smoker === 'yes'"。由于您将值设置为＆＃34;是＆＃34;而不是＆＃34;是＆＃34;在你的单选按钮。

Answer 2

Angular版本存在案例问题。第一个是“是”＆＃39;从小写y开始，第二个是“是”＆＃39;大写字母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>

使用ng-model和ng-if显示基于值的元素 - Angular 2

3 个答案: