Angular7教程-04-Angular常用操作(下)
程序员文章站
2022-07-07 20:18:26
6. 数据双向绑定 视图和数据,只要一方发生变化,另一方跟着变化。 好处是不需要在代码中手动更新视图,简化开发,增加代码内聚性,代码可读性更强。 缺点是当绑定的数据层次深、数据量大时,会影响性能。 双向数据绑定的语法是 . 修改 中的内容如下: 当在input框中输入内容时,插值表达式的位置内容会同 ......
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来引用这个模板。
上一篇: 我想之后怎么办了
下一篇: SQLServer之函数简介
推荐阅读
-
php 中常用数组操作 数组分割 次数 键名差集_PHP教程
-
Windows下Python使用Pandas模块操作Excel文件的教程
-
网站用户行为分析——在Ubuntu下安装MySQL及其常用操作
-
入门教程 Linux操作系统下串口设置及编程
-
Windows下Python使用Pandas模块操作Excel文件的教程
-
在Gnumeric下使用Python脚本操作表格的教程
-
Windows操作系统下Redis服务安装图文教程
-
在ubuntu下mysql的简单操作教程
-
MongoDB入门教程(包含安装、常用命令、相关概念、使用技巧、常见操作等)
-
在linux下,图形界面、文本命令行界面切换的操作教程