[转]Angular 4 *ngIf/Else
本文转自:http://tylerscode.com/2017/03/angular-4-ngifelse/
As you may know it wasn’t that many months ago that Angular 2 left RC and went Full Release(back in August). We are already upon the next big release of Angular with v4. Angular 4.0.0-rc.1 was released in late February with rc.2 hot on it’s heels 6 days later, today, March 2nd. There are lots of improvements including smaller bundle sizes and faster compilation. My favorite new feature at the moment is the new NgIf/Else syntax.
Previously, you may have used something like this:
Now you can use syntax like this:
You can specify another template using
ng-template, give it a variable using
#and then reference it in the
*ngIfstatement with an
elseclause.
You can also use a more explicit syntax with NgIf/Else/Then. It would look something like this:
In my opinion this helps code readability as it makes it more explicit and easier to follow. No more falsy checks with
!someConditionlike code.
Also, the
asyncpipe was added to
*ngIf. Previously you may have had a form or page that contained several fields that all independently subscribed to observables using the
asyncpipe. It may have looked something like this:
Now you can wrap all those observables into a single observable and subscribe to it in the
*ngIfstatement and assign a local object variable to reference in all your fields like this:
This code, in my opinion, is cleaner because it only subscribes to a single observable once to retrieve data. I hope this feature is as beneficial to others as it is to me.
- [Angular] Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe
- React实现Angularjs ng-show、ng-if和ng-hide
- angularjs ng-if表达式为true的情况下标签仍不显示内容
- angular笔记(ng-repeat,ng-if)使用小技巧
- angular6.0开发教程:angular6.0数据循环*ngFor、if判断
- [Angular] *ngIf syntx
- angularjs ng-if ng-show ng-hide区别
- AngularJS ng-model在ng-if里面无效
- ng-class中的if else判断
- angular中的显示与隐藏ng-show/ng-hide/ng-if/ng-switch
- angular中 ng-if 指令中的ng-model等指令失效问题
- 记一个Angular的问题(ng-if,ng-show)
- angular2中standalone=“true”和Name attribute must be set if ngModel is used within a form的问题
- angularjs ng-if 慎用 备忘
- Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
- angular中的ng-if和ng-show的区别以及ng-if的作用域问题
- AngularJS ng-if ng-repeat下使用ng-model
- Angular.JS中指令ng-if的注意事项小结
- Error! 'if ($testNgXslt.testDetailsFilter) then $testNgXslt.testDetailsFilter else 'FAIL,PASS,SKIP''
- angular学习之——ng-show/ng-hide与ng-if的区