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. hashmap为什么容量是2的n次方
		
    2. 
						
  2. centos配置c语言环境变量,CentOS7设置环境变量
		
    3. 
						
  3. mysql 内存太大被杀_数据库mysqld进程频繁被杀解决方案[终]
		
    4. 
						
  4. CentOS 7.4 上如何安装 tomcat 9
		
    5. 
						
  5. Presto常用命令：查看版本号
		
    6. 
						
  6. Python编写微信打飞机小游戏（四）
		
    7. 
						
  7. 【Android项目实战 | 从零开始写app(一)】 创建项目
		
    8. 
						
  8. js插入浏览器实现自动点击按钮
		
    9. 
						
  9. Soul向港交所递交上市申请，持续发力社交元宇宙赛道
		
    10. 
						
  10. linux lcd cd,linux LCD调试
		
    11. 
						
  11. 全球医药研发支出及处方药市场发展前景分析：预计到2026年全球处方药销售额超过1.4万亿美元[图]
		
    12. 
						
  12. 1134: 字符串转换 C语言
		
    13. 
						
  13. 基因相关性（C语言）
		
    14. 
						
  14. Flask电影网站项目
		
    15. 
						
  15. 计算机控制实验比例环节,实验报告1典型环节及其阶跃响应分析
		
    16. 
						
  16. Ubuntu系统下python opencv视频采集：使用USB端口映射指定要读取的相机设备
		
    17. 
						
  17. c语言将float转化为十六进制,十六进制转向float,float转为二进制
		
    18. 
						
  18. 知识点 —— Python进阶-2
		
    19. 
						
  19. transferto方法的应用_Java MultipartFile.transferTo方法代碼示例
		
    20. 
						
  20. adm怎么下bt连接_小型会议室音响设备怎么连接？学习下
		
    21. 
		

	


热门文章
	

    
									
  1. kubernete编排技术二：deployment
			
    2. 
						
  2. Centos 查看服务器CPU核心数
			
    3. 
						
  3. Openstack的error僵尸实例的解决办法
			
    4. 
						
  4. iPad iPhone 图标去除高亮
			
    5. 
						
  5. PHP wampserver如何升级PHP到8.1.14
			
    6. 
						
  6. CRC校验码（附CRC7校验代码）
			
    7. 
						
  7. 静态代码扫描工具（SAST）Xcheck
			
    8. 
						
  8. SQL 外键ID数组关联查询拼接字符串(转载)
			
    9. 
						
  9. flex按照字段排序
			
    10. 
						
  10. 【DDOS】黄金眼一键脚本+客户端app
			
    11.