欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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>

页面显示效果如下:

Angular7教程-04-Angular常用操作(下)

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为循环下标。页面效果如下所示:

Angular7教程-04-Angular常用操作(下)

ng-template的说明

ng-template指令用来定义模板,如下代码所示:

<ng-template #p1>
    <p>段落内容</p>
</ng-template>

上面定义了一个简单的模板,id为p1,别的地方可以通过id来引用这个模板。