javascript - Angular 2 - ngShow 等效?

标签 javascript html angular typescript

<分区>

根据我对文档的解释,如果我希望能够默认隐藏一个元素,并在单击链接时显示,下面的方法应该可行吗?

  1. 在/app/app.component.ts 中

    newTrustFormVisible: false;
    
  2. 在/app/app.component.html

    <a href="#" (click)="newTrustFormVisible = !newTrustFormVisible;">[Add New]</a>
    
    <div ng-show="newTrustFormVisible" class="panel panel-default">
      ...
    </div>
    

但是,这不起作用。它也不会产生任何错误。我错过了什么?

最佳答案

您使用 Angular 1 指令。对于 Angular 2,对隐藏时不需要位于 DOM 中的组件使用 *ngIf,或者如果需要组件,则绑定(bind)到 HTML 隐藏属性 [hidden]始终位于 DOM 中,但使用 CSS 隐藏。

例如:

<div *ngIf="newTrustFormVisible" class="panel panel-default">

<div [hidden]="!newTrustFormVisible" class="panel panel-default">

Angular 1 to Angular 2 reference

*ngIf

关于javascript - Angular 2 - ngShow 等效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42216265/

相关文章:

javascript - 如何在 chrome 的书签 API 中获取数组?

javascript - 单击表格单元格时,如何让 jquery 版本的tinyMCE 在弹出窗口中打开多个文本区域?

c# - 您最喜欢用什么方法来检查 HTML COLOR 是否有效?

JavaScript - 为什么这段代码不起作用?

javascript - Angular 2-再次单击routerLink时重新加载组件

Angular 延迟加载子模块空白路径重定向到 appModule

javascript - 无法使用 D3 和 React 在 useEffect Hook 中进行画笔交互并设置状态

javascript - 更改图表 d3 的颜色

javascript - 如何在 Node JS 中向 html 页面发送响应?

angular - 加载动态响应表单,不等待http调用完成