Question

我是Angular 8的初学者，部分代码有些困难。确实，我正在尝试使用中的ngIf Else条件根据我检索到的值显示一个按钮。

<div class="form-group">  
    <div class="row">        
        <div class="input-group col-12 md-12">
            <div class="input-group-prepend">
                <label for="situation" class="input-group-text">Current Situation</label>
            </div>
            <select class="custom-select" id="situation" formControlName="situation" name="situation" [(ngModel)]="employed">
                <option value="employed" name="employed">Employed(including unpaid family workers and apprentices)</option>
                <option value="employed" name="employed">Employed but is temporarily absent(leave without pay, parental leave etc.)</option>
                <option value="unemployed"> Unemployed, looking for work(job seekers)</option>
                <option value="retired"> Retired </ option >
                <option value="unable">Unable to work(disability)</option>
                <option value="domesticWorker"> Woman or man working in their own household(domestic worker)</option>
                <option value="student"> Pupil or Student</option>
                <option value="preschool"> Pre - school child</option>
                <option value="other"> Other(specify) </ option >
            </select>
        </div>
    </div>
</div>

<ng-container *ngIf="employed; then trueCondition else elseTemplate" >
    <div class="btn-toolbar">
        <button class="btn btn-primary" data-toggle="modal" data-target="#householdsFormModal2" data-dismiss="modal" type="button">NEXT</button>
    </div>
</ng-container>
<ng-template #elseTemplate>
    <div class="btn-toolbar">
        <button class="btn btn-primary" data-toggle="modal"
                data-dismiss="modal" type="button"
                [disabled]="householderForm.invalid">SUBMIT</button> 
    </div>
</ng-template>

当我选择前两个选项时，我的按钮设置为“下一步”，但是当我选择其他选项时，它保持为“下一个”状态，而不是“提交”状态。

Answer 1

您使用的ngIfThen语法也需要trueCondition作为模板。

请参见Angular NgIf documentation。

<ng-container *ngIf="employed == 'employed'; then trueCondition else elseTemplate"></ng-container>
<ng-template #trueCondition>
    <!-- Content if true -->
</ng-template>
<ng-template #elseTemplate>
    <!-- Content if false -->
</ng-template>

我想您想要的是ngIf语法，即*ngIf="employed == 'employed'; else elseTemplate。

<ng-container *ngIf="employed == 'employed'; else elseTemplate">
    <!-- Content if true -->
</ng-container>
<ng-template #elseTemplate>
    <!-- Content if false -->
</ng-template>

此外，请注意不要将名为ngModel的{{1}}与它的实际值混淆，该值可以是一个值为employed的{{1}}。

名为string的{{1}}将始终是“真实的”，因此请确保选中employed。

NgIf-Else条件无法正常工作

1 个答案: