Angular 2 - 相當於ngShow？

根據我對文檔的理解，如果我希望能夠隱藏默認的元素，並在單擊鏈接時顯示，以下內容應該可以工作？Angular 2 - 相當於ngShow？

在/app/app.component.ts
```
newTrustFormVisible: false; 
```

在/app/app.component.html

<a href="#" (click)="newTrustFormVisible = !newTrustFormVisible;">[Add New]</a> 

<div ng-show="newTrustFormVisible" class="panel panel-default"> 
    ... 
</div>

但是，這是行不通的。它也不會產生錯誤。我錯過了什麼？

來源

2017-02-14 Max Griffin

我自己也嘗試'newTrustFormVisible：布爾=假;'我認爲這實際上是正確的語法對於這條線，儘管它對r沒有任何影響esult。 –

您使用Angular 1指令。對於Angular 2，使用*ngIf表示當組件隱藏時不需要在DOM中，或者如果您希望組件始終位於DOM中但隱藏在CSS中，則綁定到HTML隱藏屬性[hidden]。

如：

或

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

Angular 1 to Angular 2 reference

*ngIf

來源

2017-02-14 01:18:50 shusson

這是工作，謝謝，但它不像文檔中的示例（你是對的，似乎是AngularJS 1.x）的動畫？ –

動畫是一個單獨的魚水壺，請參閱https://angular.io/docs/ts/latest/guide/animations.html – shusson

因此，ng-show會自動生成動畫，而最接近的Angular 2等價物不會這樣做。似乎很奇怪？我已經切換到ngClass，因爲這看起來更容易動畫，但我還沒有動畫工作。我會繼續玩。 –

Angular 2 - 相當於ngShow？

回答

相關問題