我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
当前回答
处理这个问题的最好方法是使用ngIf 因为这会阻止元素在前端渲染,
如果你使用[hidden]="true"或style hide [style. "它将只隐藏在前端的元素,并且人们可以更改它的值并轻松查看它, 在我看来,最好的隐藏元素的方法是ngIf
<div *ngIf="myVar">stuff</div>
如果你有多个元素(需要实现else also),你可以使用<ng-template>选项
<ng-container *ngIf="myVar; then loadAdmin else loadMenu"></ng-container>
<ng-template #loadMenu>
<div>loadMenu</div>
</ng-template>
<ng-template #loadAdmin>
<div>loadAdmin</div>
</ng-template>
ng模板示例代码
其他回答
处理这个问题的最好方法是使用ngIf 因为这会阻止元素在前端渲染,
如果你使用[hidden]="true"或style hide [style. "它将只隐藏在前端的元素,并且人们可以更改它的值并轻松查看它, 在我看来,最好的隐藏元素的方法是ngIf
<div *ngIf="myVar">stuff</div>
如果你有多个元素(需要实现else also),你可以使用<ng-template>选项
<ng-container *ngIf="myVar; then loadAdmin else loadMenu"></ng-container>
<ng-template #loadMenu>
<div>loadMenu</div>
</ng-template>
<ng-template #loadAdmin>
<div>loadAdmin</div>
</ng-template>
ng模板示例代码
要隐藏和显示div在按钮上单击angular 6。
Html代码
<button (click)="toggleElement()">FormatCell</button>
<div class="ruleOptionsPanel" *ngIf="isShow">
<table>
<tr>
<td>Name</td>
<td>Ram</td>
</tr>
</table>
</div>
AppComponent。ts代码
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
isShow=false;
toggleElement():void
{
this.isShow = !this.isShow
}
}
这适用于我,它是一种替代ng-hide和ng-show在angular2+的方法
如果你正在使用Bootstrap是这样简单:
<div [class.hidden]="myBooleanValue"></div>
如果你只是想使用AngularJS提供的对称的隐藏/显示指令,我建议写一个属性指令来简化模板(用Angular 7测试):
import { Directive, Input, HostBinding } from '@angular/core';
@Directive({ selector: '[shown]' })
export class ShownDirective {
@Input() public shown: boolean;
@HostBinding('attr.hidden')
public get attrHidden(): string | null {
return this.shown ? null : 'hidden';
}
}
其他许多解决方案都是正确的。你应该尽可能使用*ngIf。使用hidden属性可能会应用意想不到的样式,但除非您正在为其他人编写组件,否则您可能知道它是否是。因此,为了让这个显示的指令工作,你还需要确保你添加:
[hidden]: {
display: none !important;
}
到你的全球风格某处。
你可以像这样使用指令:
<div [shown]="myVar">stuff</div>
用这样对称的(和相反的)版本:
<div [hidden]="myVar">stuff</div>
在should - yous should后面加一个前缀,比如so [acmeshowwn]和just [shows]。
我使用显示属性指令的主要原因是为了将AngularJS代码转换为Angular - and——当被隐藏的内容包含导致XHR往返的容器组件时。我不直接用[hidden]="!myVar”是经常足够复杂,像:[hidden]="!(myVar || yourVar) && anotherVar”-是的,我可以反转,但它更容易出错。(如图所示)更容易思考。
隐藏属性可以用于此
[hidden]="!myVar"
另请参阅
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
问题
hidden有一些问题,因为它可能与CSS的display属性冲突。
看看Plunker例子中的一些没有被隐藏,因为它有一个样式
:host {display: block;}
集。(这可能在其他浏览器中表现不同-我用Chrome 50测试)
解决方案
你可以通过添加来修正它
[hidden] { display: none !important;}
到index.html中的全局样式。
另一个陷阱
hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;
是一样的
hidden="true"
并且不会显示元素。
Hidden ="false"将分配字符串"false",该字符串被认为是真值。 只有值为false或删除属性才会实际生成元素 可见。
使用{{}}也会将表达式转换为字符串,不会像预期的那样工作。
只有绑定[]才会像预期的那样工作,因为这个false被赋值为false而不是“false”。
*ngIf与[hidden]
*ngIf有效地从DOM中删除了它的内容,而[hidden]修改了display属性,只是指示浏览器不显示内容,但DOM仍然包含它。