Angular笔记 数据处理

Angular 中的数据处理

1.绑定数据

在header.component.ts中创建数据

数据声明的方式
1.public 共有（默认） 可以在类里外使用
2.protected 保护类型 只能在当前类和子类中使用
3.private 私有类型 只能在当期类使用

创建数据 说明

在header.component.html中取数据

取数据

在header.component.html中元素属性取值
元素属性用改为：[属性] = 值
例：<input type="text" [value]="title">

元素属性取值

引入本地图片
1.将图片复制到src->assets文件下，可创建新的文件夹
2.直接引用图片路径，不需要../
例：<img src="assets/images/01.png" alt="这是一张图片">
3.引入网络图片
例：<img [src]="imageURL" alt="这是一张图片">

2.数据循环 *ngFor(元素内部)

用来循环数据

<ul *ngIf="arr.length>0">
      <li *ngFor="let item of arr">{{item.name}}- {{item.age}}</li>
</ul>

3.*ngIf(元素内部)

用来循环数据

<p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>

<p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>

4. ngSwitch *ngSwitchCase(元素内部)

用来循环数据

<ul [ngSwitch]="score">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">订单已经确认</li> <li *ngSwitchCase="3">已发货</li>
<li *ngSwitchDefault>无效</li>
</ul>

5. 双向数据绑定(元素内部)

用来做MVVM

<input [(ngModel)]="inputVal">