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'"

<强> here

Answer 2

  角度2及以上不支持

ng-show/ng-hide。因此，您可以将[hidden]用作ng-show/ng-hide，或在上面的角度2中使用* 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}"