NgIf-Else 条件无法正常工作答案

【问题标题】：NgIf-Else condition does not work properlyNgIf-Else 条件无法正常工作
【发布时间】：2019-10-22 17:36:08
【问题描述】：

我是 Angular 8 的初学者，我的部分代码遇到了一些困难。实际上，我正在尝试在 a 中使用 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>

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

【问题讨论】：

标签： typescript angular8 angular-ng-if

【解决方案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>

此外，请注意不要将您的名为 employed 的 ngModel 与其实际值（可能是 string 和值 employed 的值）混淆。

名为employed 的ngModel 将始终是“真实的”，因此请务必检查employed == 'employed'。

【讨论】：