Angular 8 学习 （三 进阶）

前面讲解了angular环境的搭建，自定义组件的创建，使用。这都只是入门，准备好进入Angular的世界了吗？

学习完这章，我们要会一下内容：

第一个创建组件已经说了，就不多bibi了

二. Angular数据的绑定

学过1.x的应该都明白，调用数据是{{ }}

这里也是：

news.component.ts文件中定义，html中调用

推荐的写法是：

public username:string="李四"；     

声明属性  属性名称:属性类型="属性的值";

在html中调用：

声明类型有 

public  private  protected（保护）

这就是最基本的数据绑定：

  1.定义一个对象

public teacher:object={
    name:"王五",
    age:16
  }

  前端调用

<p>{{teacher.name}}</p>
<p>{{teacher.age}}</p>

就不给展示运行结果了

2..定义数组：

public arr:string[] =["aaa","bbb","ccc"]  强烈推荐

 public arr=['aaa','bbb','ccc'];

  public list:any[] = ["lsis","llss"];

  public array:Array<string>=["第一个","第二个"];

  在html中调用：

注意到：  *ngFor这个就是对数组的便利，是一个固定的写法

*ngFor="let item of arr"  arr就是定义的数组

数组plus

1。数组里面包含对象

//高级数组  数组包含对象
  public userList:any[]=[{
    username:"李四",
    age:18
  },{
    username:"王五",
    age:20
  },{
    username:"赵六",
    age:22
  }]

调用;

<ul>
    <li *ngFor="let item of userList">
        {{item.username+' '+item.age}}
    </li>
</ul>

2.数组里面有对象，对象里面有数组

 //更加复杂的数组
  public cars:any[]=[{
    cate:"宝马",
    list:[{
      title:"宝马x1",
      price:300000
    },{
      title:"宝马x2",
      price:3000000
    },{
      title:"宝马x3",
      price:400000
    }]
  },{
    cate:"奥迪",
    list:[{
      title:"奥迪x1",
      price:500000
    },{
      title:"奥迪x2",
      price:5000000
    },{
      title:"奥迪x3",
      price:6000000
    }]
  }]

调用：

<ul>
    <li *ngFor="let item of cars">
        {{item.cate}}   
        <ol>
            <li *ngFor="let car of item.list">
                {{car.title}}---{{car.price}}
            </li>
        </ol>
    </li>
</ul>

这两个结果截图：

也就是先遍历出第一层，在用第一层的便利下面的

 

绑定一个html

public content="<h1>我是html<h1>";

调用：

{{content}}

<p [innerHtml]='content' class='red'></p>

两个结果;

#数据的判断

*ngIf

<div *ngIf="flag">
    <img [src]="picUrl" />
</div>

//后台数据
 public flag:boolean=true;

<p *ngIf="list.length>3">大于3</p>
<p *ngIf="list.length<=3">小于等于3</p>

#数据的循环

*ngFor

<!--循环list 判断如果是第二个为红色-->
<ul>
    <li *ngFor="let item of list;let key=index">
        <span *ngIf="key==1" class="red"> {{key}} --- {{item.title}}  </span>  
        <span *ngIf="key!=1"> {{key}} --- {{item.title}}</span>
    </li>
</ul>

*ngSwitch

<!--ngSwitch    ngSwitchCase-->

<div [ngSwitch]="code">
    <div *ngSwitchCase="1">已经支付</div>
    <div *ngSwitchCase="2">已经确定</div>
    <div *ngSwitchCase="3">已经发货</div>
    <div *ngSwitchCase="4">已经收货</div>
    <div *ngSwitchDefault>无效订单</div>
   
</div>

//后台数据
  public code:number=4;

#管道事件

日期处理

 <!--管道-->
 {{today | date:"yyyy-HH-mm HH:mm ss"}}


  public today:any=new Date();

#事件，也就是方法

<!-- 事件-->
 <button (click)="run()">事件</button>
 <br>

 <button (click)="getData()">获取数据</button>
 <button (click)="runEven($event)">获取数据</button>
 <br>

 <strong>{{title}}</strong>
 <button (click)="setData()">修改数据</button>

 run(){
    alert("执行了")  
  }

  getData(){
    alert(this.title)
  }

  setData(){
    this.title="我是修改之后的tatle";
  }

***数据的双向绑定，重要

需要先导入FormsModule

import {FormsModule} from '@angular/forms';

<!--双向数据绑定-->
 <!--需要引入FormModule-->
 <br>
 <input type="text" [(ngModel)]="keywords">
 <button (click)="uodatekeywords()">修改keywords</button>
 {{keywords}}
 <br>
 <button (click)="getkeywords()">获取keywrds</button>

  getkeywords(){
    console.log(this.keywords);
  }