Angular 8 学习（三进阶）

以你之姓@ 2024-04-17 14:28 85阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70][]

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

### 二. Angular数据的绑定 ###

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

这里也是：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 1][]

推荐的写法是：

public username:string="李四"；

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

在html中调用：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 2][]

![20190827135303722.png][]

声明类型有

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中调用：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 3][]

### 注意到：  \*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>

这两个结果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 4][]

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

绑定一个html

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

调用：

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

两个结果;

![20190827140608413.png][]

### \#数据的判断 ###

## \*ngIf ##

<div *ngIf="flag">
        <img [src]="picUrl" />
    </div>
    
    //后台数据
     public flag:boolean=true;

## \#数据的循环 ##

## \*ngFor ##

<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 ##

<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';

<br>
     <input type="text" [(ngModel)]="keywords">
     <button (click)="uodatekeywords()">修改keywords</button>
     {
       {keywords}}
     <br>
     <button (click)="getkeywords()">获取keywrds</button>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/53b63f6fa0684f91a6628d4370c84524.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/71b04e8eeea44a79973794d265fd5588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a5d225392fed4d51b2579b3ee8436614.png
[20190827135303722.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/571c20939f694ccfa3111267bfadc219.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a8eb1954767c43768bc131bbb374f79a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7b7ea17e93a844848e1341934839c2c0.png
[20190827140608413.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9a6c944ba47445918891161ffdd5fe35.png