Угловой 4 нг-шоу

Question

Мне нужно скрыть и показать текстовое поле на основе значения, выбранного в раскрывающемся списке.

Это уже сделано в Angular 1, но как это сделать в Angular 4.

<div ng-app ng-controller="Controller">
    <select ng-model="myDropDown">
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
    </select>

    <input ng-show="myDropDown=='two'" type="text">
</div>


function Controller ($scope) {
    $scope.myDropDown = 'one';
}

Скрипка в угловых 1

Answer 1

ng-show/ng-hide не поддерживается для угловых 2 и выше.Таким образом, вы можете использовать [hidden] в качестве ng-show/ng-hide или * ngIf в качестве ng-if в приведенном выше угловом значении 2.

try *ngIf вместо ng-show

<input *ngIf="myDropDown=='two'" type="text">

DEMO

Answer 2

* ngIf включает манипулирование DOM.Я видел [скрытый] не работает много раз.Мое предложение Создайте два класса hide и покажите

.hide{
visibility:hidden;
}
.show{
visibility:unset;
}

используйте [ngClass] согласно вашему требованию.

[ngClass]="{'hide' : hideDiv, 'show' : !hideDiv}"

Answer 3

Вы можете использовать [hidden]

[hidden]="myDropDown !=='two'"

STACKBLITZ DEMO