Angular 4 ng-show

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';
}

Fiddle in Angular 1

Answer 1

您可以使用[hidden]

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

Answer 2

angular 2及更高版本不支持

ng-show/ng-hide。所以你可以在上面的angular 2中使用[hidden]作为ng-show/ng-hide或者使用*ngIf作为ng-if。

尝试*ngIf而不是ng-show

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

DEMO

Answer 3

*ngIf涉及对DOM的操作。我见过很多次隐藏不起作用。我建议创建两个类:隐藏和显示

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

根据您的要求使用ngClass。

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