angular的指令
1.HTML文件
循环数据 显示数据索引（key）
ul><li *ngFor="let item of list let key=index;">let key=index;意思是将angular的索引赋值给key{{key}} {{item.title}}li>
ul>
Ts文件
public list:any[]=[{"title":'我是标题一'},{"title":'我是标题二'},{"title":'我是标题三'}
]
- *ngIf判断语句用法
<div *ngIf="flag"><img src="assets/images/01.jpg" alt="hello">
div>
<div *ngIf!="flag"><img src="assets/images/02.jpg" alt="hi">
div>
public flag:boolean=true;
- *ngSwitch用法
HTML文件
<span [ngSwitch]="Orderstates"><p *ngSwitchCase="1">已支付p><p *ngSwitchCase="2">已支付并确认订单p><p *ngSwitchCase="3">已发货p><p *ngSwitchCase="4">确认收货p><p *ngSwitchDefault>无效订单p>
span>
typescript
public Orderstates:number=5;
4.属性[ngclass]，[ngstyle]
[ngClass]
HTML
<div [ngClass]="{red: true}">my name is songna and my english name is Ninadiv>
<div [ngClass]="{'red':!flag,'blue':flag}">my name is songna and my english name is Ninadiv>
<strong>循环数组让数组的第一个样式为红色strong>
<ul>{{key}}{{item.title}}li>
ul>
typescript``
public list:any[]=[{"title":'我是标题一'},{"title":'我是标题二'},{"title":'我是标题三'}
];
public flag:boolean=false;
[ngStyle]
<p [ngStyle]="{color:'green'}">hellop>
<p [ngStyle]="{color:cor}">hip>
typescript
public cor:string='green';
5.管道
angular中的管道以及自定义管道
例：
HTML
{{today|date:'yyyy-MM-dd'}}
typescript
public today:any=new Date();
- 事件
<button (click)="run()">点击button>
<button (click)="getdate()">2button>
<button (click)="setdate()">3button>
Ts
public title: string = '这是没改变前的title';
getdate(){alert(this.title) ;
}setdate(){this.title = '这是改变后得值';
}
- 双向绑定数据[(ngModel)]
- 双向数据绑定MVVM意思就是model变了view就会变view变了model也会变，双向数据绑定只针对表单
{{username}}<button (click)="changeusername()">变button>
-
这个就能很好地展示MVVM text框中的值变了外面username的值肯定也会随之改变
-
在使用之前一定要先在app.model.ts文件中引入模块然后再声明才可以正常使用
import { FormsModule } from '@angular/forms';imports: [FormsModule],
在ts文件中定义一个方法
public userInfo: any = {username: ''
}
然后再HTML文件中用[(ngModel)]来用那个方法获取数据
<li>姓名： li>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！