Angular7教程-04-Angular常用操作(下)
6. 数据双向绑定
视图和数据,只要一方发生变化,另一方跟着变化。
好处是不需要在代码中手动更新视图,简化开发,增加代码内聚性,代码可读性更强。
缺点是当绑定的数据层次深、数据量大时,会影响性能。
双向数据绑定的语法是[(x)]
.
修改article.component.html
中的内容如下:
<input type="text" [(ngModel)] = "content">
{{content}}
当在input框中输入内容时,插值表达式的位置内容会同时改变。在使用ngModel
时需要在app.module.ts
中增加FormsModule
的引用。修改app.module.ts
的内容如下:
//在文件头部增加如下一行:
import {FormsModule} from "@angular/forms";
//在imports中增加FormsModule
imports: [
BrowserModule,
FormsModule
]
7. angular指令操作
7.1 判断指令
7.1.1 不带else分支的if指令
article.component.ts
中定义一个布尔类型的值,然后定义一个函数,如下:
export class ArticleComponent implements OnInit {
status = false;
changeStatus(){
this.status = true;
}
}
article.component.html
定义内容如下:
<button class="btn btn-sm btn-info" (click)="changeStatus()">更改状态</button>
<p *ngIf="status">
默认状态下这段话是不显示的,因为status值为false,当单击上面的按钮,
把status的值设为true时,这段话才显示。
</p>
则页面显示效果如<p>
标签中的内容所示。
7.1.2带else分支的if指令
修改article.component.ts
的内容如下:
<p *ngIf="status;else p1">
默认状态下这段话是不显示的,因为status值为false。
</p>
<ng-template #p1>
<p>如果上面那段话不显示,则表示执行else逻辑,显示这一段话。</p>
</ng-template>
则页面上初始化时只显示第二段话,表明执行的是else逻辑。ng-template
指令后面会讲到。
7.2 样式指令
下面是内联样式和类样式的写法:
<style>
.bg{
background-color: pink;
}
</style>
<p [ngClass]="{bg:true}">这段内容应用的是类样式。</p>
<p [ngStyle]="{backgroundColor:getColor()}">本段内容样式是内联样式。</p>
页面显示效果如下:
7.3 循环指令
article.component.ts
中定义一个数组:
export class ArticleComponent implements OnInit {
articles = ['第一篇文章','第二篇文章', '第三篇文章']
}
article.component.html
中通过循环指令输出数组内容:
<p *ngFor="let article of articles; let i = index">
{{i}} - {{article}}
</p>
其中的i
为循环下标。页面效果如下所示:
ng-template的说明
ng-template
指令用来定义模板,如下代码所示:
<ng-template #p1>
<p>段落内容</p>
</ng-template>
上面定义了一个简单的模板,id为p1,别的地方可以通过id来引用这个模板。
Angular7教程-04-Angular常用操作(下)的更多相关文章
- python对redis的常用操作 下 (无序集合,有序集合)
无序集合: 首先介绍增加,删除和获得所有元素的方法.我将会用第二部分来讨论集合的特殊操作: In [136]: x.sadd("challenge", 1,2,3,4,5,6,7, ...
- Angular7教程-06-页面与数据交互
1. 本节说明 本节的内容会在上期搭建的框架基础上进行数据的填充,顺便回顾之前介绍过的插值表达式,属性绑定等知识,本节的数据只是在组件中模拟数据,后面会有专门的章节讲解如何从服务器获取数据. 2. 轮 ...
- Angular7教程-05-搭建项目环境
1. 本节说明 本节以及后面的内容我们将会通过搭建一个简单的博客程序来对angular进行介绍,项目使用前端框架是bootstrap.版本v3.3.7,另外需要安装jquery.关于bootstrap ...
- linux下关于gz和bz2压缩格式的常用操作技巧
.gz和.bz2都是linux下压缩文件的格式,有点类似windows下的.zip和.rar文件..bz2和.gz的区别在于,前者比后者压缩率更高,后者比前者花费更少的时间. 也就是说同一个文件,压缩 ...
- Linux下mysql的常用操作
Linux下mysql的常用操作: 显示数据库 show databases; 选择数据库 use 数据库名; 显示数据库中的表 show tables; 显示数据表的结构 describe 表名; ...
- ubuntu下安装mysql及常用操作
1.可通过ps -ef | grep mysql命令查看系统中是否有安装mysql 如果出现类似上述的页面,就证明是已经安装过了mysql,否则就是没有. 2.安装mysql 很简单,只需要键入如下命 ...
- ubuntu的学习教程(常用操作)
摘要 最近在学习linux,把自己学习过程中遇到的常用操作以及一些有助于理解的内容记录下来.我主要用的是ubuntu系统 命令提示符 '~' 这个是指用户的家目录,用户分为root用户和普通用户,ro ...
- 网站用户行为分析——在Ubuntu下安装MySQL及其常用操作
安装MySQL 使用以下命令即可进行mysql安装,注意安装前先更新一下软件源以获得最新版本: sudo apt-get update #更新软件源 sudo apt-get install mysq ...
- Linux下常用操作
************************ 镜像操作 ************************************* screen -s name 新建 screen -r name ...
随机推荐
- 解决nexus3报Cannot open local storage 'component' with mode=rw的异常问题
起因:正常使用的公司Maven.Docker私有仓库,突然镜像不能推送,返回getsockopt: connection refused,用docker客户端登录也是返回同样的错误,查看nexus3日 ...
- MultiThread(VS2013 MFC多线程-含源码-含个人逐步实现文档)
原文:http://download.csdn.net/download/jobfind/9559162 MultiThread(VS2013 MFC多线程-含源码-含个人逐步实现文档).rar
- Intelij IDEA 配置Tomcat时找不到 “Application Server”
由于公司突然断电,再打开idea的时候,tomcat就消失了.然后在网上搜了一下,没搜到自己乱点了一下. 如图 : plugins >> application servers Vie ...
- 打印 1 到最大的 n 位数(C++ 和 Python 实现)
(说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 输入数字 n,按顺序打印出从 1 到最大的 n 位十进制数. ...
- “微软热爱Linux“ – 心声传遍中国
去年十月微软CEO Satya Nadella在旧金山的活动中说 “微软热爱Linux(Microsoft loves Linux)”,这句话让诸多人感到惊喜.至此之后,您可以在众多Linux和开源的 ...
- .net core系列之《.net core中使用集成IDistributedCache接口的Redis和MongoDB实现分布式缓存》
分布式的缓存可以提高性能和可伸缩性的 ASP.NET Core 应用程序,尤其是托管在云中或服务器场中时. 什么是分布式的缓存 分布式的缓存由多个应用程序服务器共享,缓存中的信息不存储在单独的 Web ...
- Hive开窗函数的理解
1.从一个sql语句开始 select id,sum(price) over(partition by id order by price desc) from books; sum作为聚合函数的时候 ...
- 利用python查看电脑系统信息
#查看python默认编码格式 >>> import sys >>> print sys.getdefaultencoding() #python 2.x 默认编码 ...
- C++字符串类
好久没有写过程序,最近想学习下界面库的开发,基于directui的界面个人觉得还不错,像金山的源代码和duilib都是不错的.本人想结合二者做一个轻量级的界面库,同时又不依赖于常用的MFC.WTL等. ...
- jq双日历--最终版(功能兼容IE5,样式兼容IE6)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...