Угловая привязка не работает должным образом

Question

В форме у меня есть следующий элемент управления:

<select class="form-control" [(ngModel)] ="flightChoice.twoWays" id="twoWays" formControlName="TwoWays">
    <option value="false" >one way</option>
    <option value="true">two ways</option>
</select>

И тогда у меня есть следующий div:

<div *ngIf="flightChoice.twoWays">
    <label for="returnDate">Return Date:</label>
    <br />
    <input class="form-control" formControlName="ReturnDate" type="text" id="returnDate" />
    <br />
</div>

Когда я изменяю значение элемента управления «Выбор» на «два способа», я ожидаю появления div. И так правильно это делает. Но когда я снова переключаюсь на «один путь», div должен исчезнуть, но это не так. Любой намек на то, как заставить это работать должным образом?

Answer 1

Обе строки 'true' и 'false' являются правдивыми (фактически все непустые строки являются правдивыми). Из-за этого ваш рабочий процесс выглядит примерно так:

1. flightChoice.twoWays начинает содержать ложное значение (я не знаю, что это такое в вашем случае - это может быть false, undefined, null и т. Д.). Это означает, что ваш div является , а не , показанным изначально.
2. Вы выбираете «два пути» в пользовательском интерфейсе, который меняет flightChoice.twoWays на 'true' (строка). Поскольку это истинное значение, на экране отображается div.
3. Вы выбираете «в одну сторону» в пользовательском интерфейсе, который меняет flightChoice.twoWays на 'false' (снова строка). Помните, что это все еще истинное значение, так как это непустая строка, поэтому ваш div остается на экране.

У вас есть два варианта решения этой проблемы - первый уже указан в другом ответе , но заставляет вас работать со строками в предполагаемом коде TypeScript, безопасном для типов.

Если вы хотите хранить логические значения true и false вместо строк 'true' и 'false', вы можете использовать синтаксис Angular [ngValue], который позволяет вам указывать литеральное значение (например, логические значения true и false), а не их строковые представления. Вот как это выглядит:

<select class="form-control" [(ngModel)] ="flightChoice.twoWays" id="twoWays" formControlName="TwoWays">
    <option [ngValue]="false" >one way</option>
    <option [ngValue]="true">two ways</option>
</select>

Как видите, это так же просто, как изменить option s value="true" на [ngValue="true"]. С этим изменением для flightChoice.twoWays будет установлено логическое значение, и вы сможете оставить директиву ngIf без изменений, избегая необходимости работать со строками, для которых логические значения более подходят.

Answer 2

Попробуйте это:

  <div *ngIf="flightChoice.twoWays=== 'true'"></div>