NgIf-Else условие не работает должным образом - PullRequest
Новая
       20

NgIf-Else условие не работает должным образом

0 голосов
/ 22 октября 2019

Я новичок в Angular 8, и у меня есть некоторые трудности с частью моего кода. Действительно, я пытаюсь использовать условие ngIf Else в a для отображения кнопки в соответствии со значением, которое я получаю. 

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

Когда я выбираю первые два параметра, моя кнопка устанавливается на Next, но, когда я выбираю другие варианты, он остается в состоянии «Далее» вместо «Отправить»

1 Ответ

1 голос
/ 22 октября 2019

Вы используете синтаксис ngIfThen, который также требует trueCondition в качестве шаблона.

См. Документацию Angular NgIf . 

<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 с именем employed с его фактическим значением, которое может бытьstring со значением employed.

ngModel с именем employed всегда будет "правдивым", поэтому обязательно отметьте employed == 'employed'.

...