今天完成的事: 数据双向绑定 视图和数据，只要一方发生变化，另一方跟着变化。 好处是不需要在代码中手动更新视图，简化开发，增加代码内聚性，代码可读性更强。 缺点是当绑定的数据层次深、数据量大时，会影响性能。 双向数据绑定的语法是[(x)]. 修改article.component.html中的内容如下： {{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定义内容如下： 更改状态

默认状态下这段话是不显示的，因为status值为false,当单击上面的按钮， 把status的值设为true时，这段话才显示。

则页面显示效果如

标签中的内容所示。 7.1.2带else分支的if指令 修改article.component.ts的内容如下：

默认状态下这段话是不显示的，因为status值为false。

如果上面那段话不显示，则表示执行else逻辑，显示这一段话。

则页面上初始化时只显示第二段话，表明执行的是else逻辑。ng-template指令后面会讲到。 7.2 样式指令 下面是内联样式和类样式的写法：

这段内容应用的是类样式。

本段内容样式是内联样式。

7.3 循环指令 article.component.ts中定义一个数组： export class ArticleComponent implements OnInit { articles = ['第一篇文章','第二篇文章', '第三篇文章'] } article.component.html中通过循环指令输出数组内容：

{{i}} - {{article}}

明天目标: 请假一天 遇到的问题 :进度太慢 收获: 继续加油