* ngif Не работает после первого клика.Угловой 6

Question

Что я хочу достичь, так это то, что у меня есть поле Select в angular6 на основе выбранного значения, которое я хочу скрыть и отобразить еще один div.

Вот код.

 <div class="form-group">
          <label for="servicePriviledges">Managed</label>
          <select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
            <option value="false">False</option>
            <option value="true">True</option>
          </select>
           <br>
        </div>

<div class="form-group" *ngIf="managed">
          <label for="managerType" >Manager Type</label>
          <select type="text" aria-hidden="false" class="form-control" id="managerType" name="managerType">
            <option value="false">False</option>
            <option value="true">True</option>
          </select>
        </div>

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

Я даже пытался настроить атрибут видимости стиля, а также директиву [hidden], но получил тот же результат.

Я даже пытался дать изменение при измененииметод, но без изменений в результате.

информация о версии:

"@angular/core": "^6.1.6",
"@angular/forms": "^6.1.6",

Оба эти элемента управления имеют форму 'ngForm'.

Answer 1

Другой подход - прикрепить директиву [ngValue] для каждой опции.

<select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
    <option [ngValue]="false">False</option>
    <option [ngValue]="true">True</option>
</select>

Answer 2

managed будет иметь строковое значение 'true' или 'false' обновить ngIf, как это

<div class="form-group" *ngIf="managed === 'true'">
 ...
 </div>

, или вы можете использовать ngValue, поэтому для управляемого будет иметь логическое значение true, false

 <select type="text" class="form-control" name="managedInfo" [(ngModel)]="managed">
   <option [ngValue]="false">False</option>
   <option [ngValue]="true">True</option>
  </select>