Angular学习第三课--相关数据绑定汇总

布满荆棘的人生 2023-02-28 15:29 164阅读 0赞

1、如何使用组件

2、Angular绑定数据

2.1 数据文本绑定

<h1>
    {
       {title}}
    </h1>
    <div>
    1+1={
       {1+1}}
    </div>

2.2 绑定html

this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"
    
    
    <div [innerHTML]="h"></div>

2.3 动态绑定html属性值

<div [id]="id" [title]="msg">调试工具看看我的属性</div>

![20200721222419400.png][]

2.4 数据循环 \*ngFor

1、普通循环

2、循环时设置key

3、template循环数据

2.5 条件判断 \*ngIf

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

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

2.6 \*ngSwitch 分支判断

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

2.7 执行事件(click)=”getData()”

<button class="button" (click)="getData()">
    点击按钮触发事件
    </button>
    <button class="button" (click)="setData()">
    点击按钮设置数据
    </button>
    
    
    
    getData(){ /*自定义方法获取数据*/
    //获取
    alert(this.msg);
    } s
    etData(){
    //设置值
    this.msg='这是设置的值';
    }

2.8 表单事件

<input type="text" (keyup)="keyUpFn($event)"/>
    
    keyUpFn(e){
    console.log(e)
    }

2.9 动态绑定样式 \[ngClass\]、\[ngStyle\]

<div [ngClass]="{'red': true, 'blue': false}">
    这是一个 div
    </div>
    
    
    public flag=false;
    <div [ngClass]="{'red': flag, 'blue': !flag}">
    这是一个 div
    </div>
    
    
    public arr = [1, 3, 4, 5, 6];
    <ul>
    <li *ngFor="let item of arr, let i = index">
    <span [ngClass]="{'red': i==0}">{
       {item}}</span>
    </li>
    </ul>

<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>
    
    
    public attr='red';
    <div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>

2.10 双向数据绑定

//注意根组件AppComponent引入模块： FormsModule
    import { FormsModule } from '@angular/forms';
    
    
    @NgModule({
    declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NewsComponent
    ],
    imports: [
    BrowserModule,
    FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
    
    
    //使用
    <input type="text" [(ngModel)]="inputValue"/>
    {
       {inputValue}}

2.11 管道（数据格式化）

public today=new Date();
    
    
    
    
    <p>{
       {today | date:'yyyy-MM-dd HH:mm:ss' }}</p>

其他管道：

[http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34][http_bbs.itying.com_topic_5bf519657e9f5911d41f2a34]

[20200721222419400.png]: /images/20230209/f22d73e9b2b848088486405457835db2.png
[http_bbs.itying.com_topic_5bf519657e9f5911d41f2a34]: http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34