From Anuglar v4 above, we are able to using ‘as‘ with async pipe. This allow as using ‘new variable‘ instead of subscribe to observable.We also able to use ‘else‘ with ‘*ngIf‘, else taks a ‘template‘ which will be displayed when the if expression is not matched.<ng-template #loading><div class="message"><img src="/img/loading.svg" alt="loading...">Fetching meals...</div></ng-template><di...
ng2 结构指令不能直接嵌套使用，可使用标签来包裹指令 示例如下 <ul> <ng-container *ngFor="let item of lists"> <div class="thumb p-date" *ngIf="item.picurl"> <a href="# " rel="external nofollow" ><img src="{{item.picurl}} " alt=" " style="width:79px;height: 70px; "></a> </div> </ng-container> </ul>: 以上这篇对angular2中的ngfor和ngif指令嵌套实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，...
NgIf 指令作用ngIf 指令用于根据表达式的值，在指定位置渲染 then 或 else 模板的内容。 then 模板除非绑定到不同的值，否则默认是 ngIf 指令关联的内联模板。else 模板除非绑定对应的值，否则默认是 null。NgIf 指令语法简单形式<!--语法糖--> <div *ngIf="condition">...</div> <!--Angular 2.x中使用template--> <ng-template [ngIf]="condition"><div>...</div></ng-template>使用else块<div *ngIf="condition; else elseBlock...
在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的TypeScript所以在看下面的内容之前你最好可以看一下TypeScript或...
将ngInclude放在ngIf或ngSwitch中时,我遇到了一些奇怪的行为. 例如,请执行以下操作：<button ng-click="showIncTemplate = !showIncTemplate">Toggle Included Template</button> <button ng-click="showInlineTemplate = !showInlineTemplate">Toggle Inline Template</button><div ng-if="showIncTemplate"><p>Included template:</p><div ng-include="'template.html'"></div> </div><div ng-if="showInlineTemplate"><h1>Inlin...
我的Angular2 * ngIf里面有倒计时jQuery函数,它无法正常工作.我的console.log中没有任何错误,但div为空.它只是显示标题(h1).这是我的代码：HTML<div class="row" *ngIf="isDataAvailable"><h1>Dashboard</h1><div id="kodeCountdown"></div></div>Angular2 TypeScript组件ngOnInit() {this.getData().then(() => this.isDataAvailable = true); } ngAfterViewInit() {if ($('#kodeCountdown').length) {var austDay = new Date();...
我的一位同事在工作中向我展示了一种非常奇怪的角度一次性绑定行为. 用例： 如果你有一个元素,哪个文本通过ng-if条件的块内一次性绑定绑定,那么如果我们改变那个值,例如添加一些字母,然后改变ng-if的条件,之后来自一次性绑定的值已刷新. HTML：<div ng-if="a" class="blue">{{ ::text }}</div>这是一种错误,还是预期的行为？ 这是我正在做的一个例子：http://codepen.io/samot/pen/rLJAdN解决方法:如果ng-if的条件为false然后为tru...
我在缓存某些东西时设置了一些localstorage变量. 我想在列表中显示一个项目已被缓存的ng-repeat,因此我必须查看item.name是否在localstorage中(可能是在图标元素上使用了ng-if).<ion-list class="pokemonList"><ion-item class="item item-icon-right" ng-repeat="pokemon in pokemons | filter:search.filter" ng-click="goToPokemon(pokemon.url, pokemon.name)">{{pokemon.name | capitalize}} <i class="icon i...
我想要实现的是,我根据我想要隐藏的选定值在angular6中有一个Select字段并显示另一个div. 这是代码.<div class="form-group"><label for="servicePriviledges">Managed</label><select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed"><option value="false">False</option><option value="true">True</option></select><br></div><div class="form-group" *ngIf="managed"><...
我有一个对象附加到$scope,我想序列化为JSON.该对象已经设置了数据绑定,因此有使用ng-model的输入字段,什么不是.尝试调用angular.toJson时,值不是最新的. 奇怪的是,我认为我的价值观并没有像我想象的那样得到更新.所以为了简单起见,我提交了一些console.log调用,但是console.log中的值是正确的,但它们不适用于JSON转换？我也用JSON.stringify测试了它,但结果是一样的.码：// This looks fine console.log('Data:', $scope.obj); va...
背景 我正在创建一个信用卡表单组件.该组件检查已输入的信用卡类型,并显示卡类型的符号/图标.该符号是一个外部SVG,一旦识别出信用卡类型就会加载. 问题 cc符号闪烁,如下图所示. Chrome DOM检查器中的一个外观向我展示了应用了* ngIf的元素正在发生的事情,元素正在以某种方式更新(没有任何属性更改),这似乎会导致闪烁.码 下面是我的模板中包含闪烁部分的代码.我已经检查了组件,并且ngIf中使用的变量没有更新,除非它假设(当信用卡号更...