Javascript Angular 2 - ngShow 等价物？

Angular 2 - ngShow equivalent?

提问by Max Griffin

According to my interpretation of the documentation, if I want to be able to have an element hidden by default, and shown when a link is clicked, the following ought to work?

根据我对文档的解释，如果我希望能够在默认情况下隐藏一个元素，并在单击链接时显示，以下应该有效吗？

1. In /app/app.component.ts

   newTrustFormVisible: false;
   

2. In /app/app.component.html

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

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>
   

However, this does not work. It also produces no errors. What am I missing?

但是，这不起作用。它也不会产生错误。我错过了什么？

回答by shusson

Your using Angular 1 directives. For Angular 2 use *ngIffor components that do not need to be in the DOM when they are hidden or bind to the HTML hidden property [hidden]if you want the component to always be in the DOM but hidden with CSS.

您使用的 Angular 1 指令。对于 Angular 2 *ngIf，[hidden]如果您希望组件始终在 DOM 中但使用 CSS 隐藏，则将它们用于隐藏时不需要在 DOM 中或绑定到 HTML 隐藏属性的组件。

e.g:

例如：

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

or

或者

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

Angular 1 to Angular 2 reference

Angular 1 到 Angular 2 参考

*ngIf

*ngIf