Javascript 显示隐藏角度为 7 的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/55375009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show Hide a div in angular 7
提问by Ayush Jain AJ
I am trying to show/hide a div in angular 7 using ng-model and ng-hide but its not working.
我正在尝试使用 ng-model 和 ng-hide 在 angular 7 中显示/隐藏一个 div，但它不起作用。
buttonto Show/Hide- used ng-modelto set expression
buttonto Show/Hide-用于ng-model设置表达式
<button type="checkbox" ng-model="show" >show/hide</button>
divto Show/Hide, Used ng-hideto hide the div
div显示/隐藏，用于ng-hide隐藏div
<div class="row container-fluid" ng-hide="show" id="divshow" >
Div Content
</div>
</body>
</html>
I have tried ng-modeland ng-hidestill it's not working.
Please provide a solution
我已经尝试过了ng-model，ng-hide但仍然无法正常工作。请提供解决方案
回答by Abderrahim Soubai Elidrissi
In your HTML
在你的 HTML
<button (click)="toggleShow()" type="checkbox" >show/hide</button>
<div *ngIf="isShown" class="row container-fluid" id="divshow" >
Div Content
</div>
in your component class add this:
在您的组件类中添加：
isShown: boolean = false ; // hidden by default
toggleShow() {
this.isShown = ! this.isShown;
}
回答by Seba Cherian
Try this solution:
试试这个解决方案：
Solution 1:
解决方案1：
<div *ngIf="show" class="row container-fluid" id="divshow" >
Div Content
</div>
Solution 2:
解决方案2：
<div [hidden]="!show" class="row container-fluid" id="divshow" >
Div Content
</div>
回答by Drusto
You can use <div *ngIf="show"
您可以使用 <div *ngIf="show"
and use in your .ts file a boolean that you can change the value if the button is tiggered
并在您的 .ts 文件中使用一个布尔值，如果按钮被触发，您可以更改该值
回答by Abhishek Kumar
You can use changeevent handler if you are using type='checkbox'
change如果您正在使用，则可以使用事件处理程序type='checkbox'
<input type="checkbox" (change)="show = !show" ng-model="show" />
Div to Show/Hide
<div class="row container-fluid" *ngIf="show" id="divshow" >
Div Content
</div>
回答by X3Vikas
you should use a flag In your ts file, By default flag false
您应该在 ts 文件中使用标志，默认情况下标志为 false
<button type="checkbox" (click)="flag= !flag">{{falg=== true ? 'Show' : 'Hide'}}</button>
