ngIf、ngSwitch、ngForOf

这一节，我们将介绍angular内置指令：ngIf、ngSwitch、ngForOf。这也是日常开发中经常会遇到的常见指令。原文阅读

ngIf

ngIf是内置的结构型指令，控制宿主元素的添加或删除，取决于绑定的值是否为真。（跟vue的v-if是类似的，不是控制display属性）

单独使用ngIf

import { Component, OnInit } from '@angular/core';
@Component({selector: 'app-ng-if',template: `<div *ngIf="condition">condition为真是显示</div>`,
})
export class NgIfComponent implements OnInit {condition = true;...
}

ngIf可以用于任何HTML元素。 *ngIf是个语法糖，上个例子完整的写法如下：

import { Component, OnInit } from '@angular/core';
@Component({selector: 'app-ng-if',template: `<ng-template [ngIf]="condition"><div>condition为真是显示</div></ng-template>`,
})
export class NgIfComponent implements OnInit {condition = true;// ...
}

**ng-template是一块内嵌模板，类型是TemplateRef。（跟vue的template类似）

当然，我们平时根本就不着这么写，简写*ngIf足矣。

配合ngIfElese使用

import { Component, OnInit } from '@angular/core';
@Component({selector: 'app-ng-if',template: `<button class="btn btn-primary btn-small" (click)="condition = !condition">切换condition</button><div *ngIf="condition; else elseBlock">condition为真是显示</div><ng-template #elseBlock><div>condition为假是显示</div></ng-template>`,
})
export class NgIfComponent implements OnInit {condition = true;...
}

这里需要注意的是：上面例子中的elseBlock并非组件中的某变量，而是TemplateRef的引用。（不带#）

使用TemplateRef

上面示例中的else后面跟的变量都是模板的引用而非组件中的变量，下面演示怎么用组件中的变量:

// 1、引入TemplateRef、ViewChild
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';@Component({selector: 'app-ng-if',template:  `<button class="btn btn-primary btn-small" (click)="condition = !condition">切换condition</button><div *ngIf="condition; else elseBlocks">condition为真是显示</div><ng-template #otherTel><div>condition为假是显示</div></ng-template>`,
})
export class NgIfComponent implements OnInit {condition = true;// 2、生命一个TemplateRef类型的变量elseBlocks: TemplateRef<any> = null; // 3、将页面上的引用为otherTel的template赋值给变量otherTemplate。// @ViewChild() 现在可以理解为：是获取页面元素的一种方式，后面会详细介绍@ViewChild('otherTel', { static: true }) otherTemplate: TemplateRef<any> = null;// ...ngOnInit(): void {// 4、给声名的变量elseBlocks赋值为otherTemplatethis.elseBlocks = this.otherTemplate;}
}

问：为什么我们需要使用变量的形式来进行条件筛选呢？

答：相较于模板的引用，变量的形式可以更加灵活。我们可以根据不同的需求，给elseBlocks赋予不同的值，而模板引用的形式只能是写死的一段内容。

ngSwitch

ngSwitch是内置的结构型指令，控制显示哪个模版，类似js中的switch

...
@Component({selector: 'app-ng-switch',template: `<p><input type="radio" name="fruit" value="apple" id="apple" [(ngModel)]="fruit" /><label for="apple">												


											

Angular ngIf ngSwitch ngForOf相关推荐
	

    
								
  1. angular学习-*ngFor,*ngIf,*ngSwitch
		
    *ngFor,*ngIf,*ngSwitch学习记录 1.*ngFor 2.*ngIf 3.*ngSwitch 1.*ngFor 一般用于数据循环,例子(打印arr里边的值)如下: ts: html: ...
    
		
    2. 
						
  2. angularjs 1.3 综合学习 (one way bind , ng-if , ng-switch , ng-messages, ng-form ,ng-model )
		
    主要讲解1.3后的一些新功能,和一些以前没有介绍的小功能 (ng-if,ng-switch). 1.one way bind 这个之前的版本已经有人自己实现了,但是在1.3之后,angularjs 有 ...
    
		
    3. 
						
  3. angular *Ngif  else用法
		
    NgIf 指令 ngIf 指令用于根据表达式的值,在指定位置渲染then 或 else 模板的内容. then 模板除非绑定到不同的值,否则默认是 ngIf 指- 令关联的内联模板. else 模板除 ...
    
		
    4. 
						
  4. angular *ngIf 和 *ngIf else的用法 （举例）
		
    举个栗子: 点击删除评论,删除后新增按钮(点击撤回) html: <button (click)="delComment()">删除</button> &l ...
    
		
    5. 
						
  5. Angular ngIf相关问题
		
    1.ngIf会把元素销毁,如果在页面加载时给元素注册了事件(如MouseOver),当ngIf的条件不满足时会销毁元素,再次生成元素并不会把事件注册 2.ngIf在IOS上会导致input控件无法正常 ...
    
		
    6. 
						
  6. Angular ngIf 指令运行时执行原理
		
    源代码如下: 这里的NgIf是一个Directive实例吗? 重要的属性: _elseTemplateRef和_elseViewRef为空,意思是template中的ngif没有指定如果条件为fals ...
    
		
    7. 
						
  7. angular ngif指令
		
    还是用topbar演示 ngif的使用 上代码 <ul><li *ngFor="let menu of menus; let i = index">< ...
    
		
    8. 
						
  8. 美伊战争_战争不是答案
		
    美伊战争 翻译自: https://rachelandrew.co.uk/archives/2003/03/09/war-is-not-the-answer/ 美伊战争 查看全文 http://www ...
    
		
    9. 
						
  9. ngfor ngif（ngif then else） ngswitch + ngfor里面使用ngif 和 ngswitch
		
    ng是angular的内置命令,可以在HTML文件里实现简单的 if for switch逻辑. 一:先看下ngif: <span *ngIf="switch">xxx ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 计算机软件技术 上海电力学院,上海电力学院 计算机软件技术  实验三 用头插法和尾插法创建线性表...
		
    2. 
						
  2. scala本地调试_如何编写自己的Java / Scala调试器
		
    3. 
						
  3. tomcat6的项目能直接在tomcat7上用吗_极尽人性化的设计: 能“隐形”的笔记本电脑支架...
		
    4. 
						
  4. 丁磊斩获400亿市值IPO，终于有钱买周杰伦了
		
    5. 
						
  5. Spring框架对JDBC的简单封装。提供了一个JDBCTemplate对象简化JDBC的开发
		
    6. 
						
  6. 基于JAVA+SpringMVC+Mybatis+MYSQL的OA办公系统
		
    7. 
						
  7. 学习实践：使用模式，原则实现一个C++自动化测试程序
		
    8. 
						
  8. android studio 布局设计,Andriod界面设计适配和Android Studio中的资源
		
    9. 
						
  9. 反转链表与分组反转链表
		
    10. 
						
  10. 360环视TOP10供应商榜单发布！未来五年市场规模将超300亿元
		
    11. 
						
  11. 如何找回mysql删除的表_mysql误删表如何恢复，恢复被删除表的步骤说明
		
    12. 
						
  12. 协同开发  ----以码云为例
		
    13. 
						
  13. INTERCEPTOR DISCONNECTED 的问题
		
    14. 
						
  14. 镜像电流源特点_镜像电流源原理及其应用电路.pdf
		
    15. 
						
  15. BIM模型文件下载——三层江湖别墅
		
    16. 
						
  16. 软件设计之——“高内聚低耦合”
		
    17. 
						
  17. 操作系统学习笔记1--ucos
		
    18. 
						
  18. 斐波那契数的时间复杂度、空间复杂度详解
		
    19. 
						
  19. Manifest merger failed with multiple errors
		
    20. 
						
  20. 小猫爪：S32K3学习笔记02-S32K3之FlexCAN
		
    21. 
		

	


热门文章
	

    
									
  1. 分布式数据库ACID特性
			
    2. 
						
  2. 赋值表达式的左值和右值
			
    3. 
						
  3. MSF渗透测试android手机
			
    4. 
						
  4. Linux之 Sqlite 修复 The database disk image is malformed
			
    5. 
						
  5. oob(out-of-bag)和关于bagging的更多讨论
			
    6. 
						
  6. Caffe框架总结-Caffe结构
			
    7. 
						
  7. 利用Java操作Office2007成为可能
			
    8. 
						
  8. 日记侠：如何优化你的微信头像？
			
    9. 
						
  9. 练习——MySQL 查询
			
    10. 
						
  10. 小朋友必读：修身养德，治学立教
			
    11.