Question

所以我有一个简单的代码，但是当我运行时，它并没有隐藏任何div我在这里找不到像这样简单的代码，我只是开始角度。 isnurse确实返回＆＃34; true＆＃34;

<div *ngIf="user">
<img src="assets/logo.png">

<h1>Hello {{user.firstName}}, {{user.isnurse}}</h1>
<a href="/api/auth/signout">Signout</a>

<div ng-show="user.isnurse == true">
    <h1>DO NURSE THINGS</h1>
    <ul>
        <li><a [routerLink]="['/articles']">List Articles</a></li>
        <li><a [routerLink]="['/articles/create']">Create Article</a></li>
    </ul>
</div>

<div ng-show="user.isnurse == false">
    <h1>DO PATIENT THINGS</h1>
    <ul>
        <li><a [routerLink]="['/articles']">List Articles</a></li>
        <li><a [routerLink]="['/articles/create']">Create Article</a></li>
    </ul>
</div>

Answer 1

使用*ngIf代替ng-show

From docs
  隐藏元素与删除元素完全不同   NgIf。

当您隐藏元素，该元素及其所有后代时   留在DOM中。这些元素的所有组件都留在内存中   和Angular可能会继续检查更改。你可能会抱着   对于相当大的计算资源和降低性能   用户看不到的东西。

与hidden属性不同，Angular的*ngIf指令不受样式特异性约束的约束。无论您的样式表如何，使用它总是安全的。但是，值得注意的是，它在功能上并不相同。它不是切换显示属性，而是通过在DOM中添加和删除模板元素来实现的 TL：DR ngIf是一个结构指令，它创建/销毁DOM内的内容。绑定到hidden属性只是隐藏/显示带有css的内容，即添加/删除display:none元素的样式。

<div *ngIf="user"> <img src="assets/logo.png"> <h1>Hello {{user.firstName}}, {{user.isnurse}}</h1> <a href="/api/auth/signout">Signout</a> <div *ngIf="user.isnurse"> <h1>DO NURSE THINGS</h1> <ul> <li><a [routerLink]="['/articles']">List Articles</a></li> <li><a [routerLink]="['/articles/create']">Create Article</a></li> </ul> </div> <div *ngIf="!user.isnurse"> <h1>DO PATIENT THINGS</h1> <ul> <li><a [routerLink]="['/articles']">List Articles</a></li> <li><a [routerLink]="['/articles/create']">Create Article</a></li> </ul> </div>

Answer 2

对于Angular＆gt; = 2，请使用[hidden]

<div [hidden]="!user.isnurse">
    <h1>DO NURSE THINGS</h1>
    <ul>
        <li><a [routerLink]="['/articles']">List Articles</a></li>
        <li><a [routerLink]="['/articles/create']">Create Article</a></li>
    </ul>
</div>

<div [hidden]="user.isnurse">
    <h1>DO PATIENT THINGS</h1>
    <ul>
        <li><a [routerLink]="['/articles']">List Articles</a></li>
        <li><a [routerLink]="['/articles/create']">Create Article</a></li>
    </ul>
</div>

Answer 3

在角度2中有隐藏组件的隐藏方法。

＆＃34; ng-show＆＃34;，＆＃34; ng-hide＆＃34; ar angularjs指令。

<div *ngIf="user">
<img src="assets/logo.png">

<h1>Hello {{user.firstName}}, {{user.isnurse}}</h1>
<a href="/api/auth/signout">Signout</a>

<div [hidden]="!user.isnurse">
    <h1>DO NURSE THINGS</h1>
    <ul>
        <li><a [routerLink]="['/articles']">List Articles</a></li>
        <li><a [routerLink]="['/articles/create']">Create Article</a></li>
    </ul>
</div>

<div [hidden]="user.isnurse">
    <h1>DO PATIENT THINGS</h1>
    <ul>
        <li><a [routerLink]="['/articles']">List Articles</a></li>
        <li><a [routerLink]="['/articles/create']">Create Article</a></li>
    </ul>
</div>

角度简单nf显示没有显示

3 个答案: