Angular - мой ngIf скрывает метку ввода только один раз

Question

*ngIf="currentIdea.oetSupportNeeded" У меня есть выпадающий список с 2 значениями - да и нет, и еще одна метка ввода, где вы можете писать свободно. Я хочу показывать input-label только тогда, когда пользователь выбрал «да» в раскрывающемся списке, и скрывать его, когда выбрано «нет».

Моя проблема в том, что следующий код работает только один раз - когда страница загружается и выбрано «нет», метка ввода скрыта, но когда вы снова выбираете «да», а затем «нет», метка появляется и не отображается. больше не исчезают. Я хочу, чтобы он включался / выключался в зависимости от выбора пользователя

Я пытался использовать ngShow, ngHide, [disabled] и т. Д. Ничего не помогло

<div class="select-wrapper" [ngClass]="{'select-wrapper-blocked': isNotAdmin()}">
            <select class="input-control" [(ngModel)]="booleanVariable">
                <option value="false">No</option>
                <option value="true">Yes</option>
            </select>
        </div>
    </div>

    <div class="col form-input" [ngClass]="{'form-input-blocked': isNotAdmin()}">
        <p class="input-label">
            Some text
        </p>
        <input *ngIf="booleanVariable" class="input-control" [(ngModel)]="stringVariable" />
    </div>

Answer 1

Нечто подобное произошло со мной несколько часов назад.Проблема заключалась в том, что

<option value="false">No</option> <option value="true">Yes</option> было неправильно.Я решил это с помощью

<option [value]="false">No</option> <option [value]="true">Yes</option>

Это потому, что в противном случае Angular не «анализирует» значение параметра, а распознает его как строку.

Answer 2

Вы используете true и false в качестве строк. Вы можете изменить тест в свой ngIf.

Как

<select [(ngModel)]="foo">
  <option [ngValue]="true">true</option>
  <option [ngValue]="false">false</option>
</select>
<input *ngIf="foo == true"/>

И чтобы определить значение по умолчанию, вы можете установить значение foo в классе, например

public foo = true;

Answer 3

В соответствии с кодом, которым вы поделились, значение вашего меню выбора привязано к свойству booleanVariable вашего компонента.Ваш *ngIf запрашивает другое свойство, поэтому условие неверно.Вы должны проверить booleanVariable в состоянии.

Answer 4

Используйте ngModelChange событие и создайте функцию для типизации данных.

Проверьте ссылку, например. Показать скрытое поле с помощью * ngIf