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

Fiddle in Angular 1

Answer 1

您可以使用[hidden]

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

STACKBLITZ DEMO

Answer 2

ng-show/ng-hide does not supported for angular 2 and above. So you can use [hidden] as ng-show/ng-hide or use *ngIf as ng-if in above angular 2 .

尝试 *ngIf 而不是 ng-show

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

DEMO

Answer 3

*ngIf 涉及对 DOM 的操作。我已经看到 [hidden] 多次不起作用。我的建议创建两个类隐藏和显示

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

根据您的要求使用 [ngClass]。

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

Angular 4 场演出

Angular 4 ng-show

angularjs

angularjs-directive

angular