angular组件数据和事件

<h1>引入图片</h1>


        <img src="assets/images/02.png" alt="收藏" />


        <img [src]="picUrl" />


<hr>

<h1>循环数据 显示数据的索引（key）</h1>


      <ul>

        <li *ngFor="let item of list;let key=index;">
          {{key}}---{{item.title}}
        </li>
      </ul>

<h1>条件判断语句 *ngIf</h1>


    <div *ngIf="flag">

      <img src="assets/images/02.png" />
    </div>

    <div *ngIf="!flag">

        <img src="assets/images/01.png" />
    </div>
      


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

    

<h1>条件判断语句 *ngSwitch</h1>


    <span [ngSwitch]="orderStatus">
      <p *ngSwitchCase="1">
          表示已经支付
      </p>
      <p *ngSwitchCase="2">
          支付并且确认订单
      </p>
      <p *ngSwitchCase="3">
          表示已经发货
      </p>
      <p *ngSwitchCase="4">
          表示已经收货
      </p>
      <p *ngSwitchDefault>
        无效订单
      </p>
    </span>


  
 <h1>属性[ngClass]、[ngStyle]</h1>



                <div class="red">
                    ngClass演示 （尽量不要用dom来改变class）
                </div>
                    

                <div [ngClass]="{'blue':true,'red':false}">
                    ngClass演示
                </div>

                <hr>  

                <div [ngClass]="{'orange':flag,'red':!flag}">
                    ngClass演示
                </div>

              <strong>循环数组，让数组的第一个元素的样式为red ,第二个为orange</strong>


              <ul>


                  <li *ngFor="let item of list;let key=index;" [ngClass]="{'red':key==0,'orange':key==1,'blue':key==2}">
                      {{key}}---{{item.title}}
                  </li>
              </ul>



              <hr>  

              <p style="color:red">我是一个p标签</p>



              <p [ngStyle]="{'color':'blue'}">我是一个p标签</p>



              <p [ngStyle]="{'color': attr}">我是一个p标签  </p>

            <br>

<h1>管道</h1>

      {{today | date:'yyyy-MM-dd HH:mm ss'}}


<h1>事件</h1>
  
        <strong>{{title}}</strong>

        <br>  
        <br>  

        <button (click)="run()">执行事件</button>

        <br>  
        <br>  

        <button (click)="getData()">执行方法获取数据</button>
        <br>  

        <br>  
        <button (click)="setData()">执行方法改变属性里面的数据</button>

        <br>  

        <br>  
        <button (click)="runEvent($event)">执行方法获取事件对象</button>

<h1>表单事件 事件对象</h1>



            
          <!-- <input type="text" (keydown)="keyDown()" /> -->

          keyDown
          <input type="text" (keydown)="keyDown($event)" />

          <br>

          keyUp:


          <input type="text" (keyup)="keyUp($event)" />


<h1>双休数据绑定--MVVM 只是针对表单</h1>


            <input type="text" [(ngModel)]='keywords' />

            {{keywords}}

            <br>
            <br>


            <button (click)="changeKeywords()">改变keywords的值</button>

            <br>
            <br>

            <button (click)="getKeywords()">获取keywords的值</button>
            
 <br> 
 <br>
 <br>
 <br>
 <br>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {


  public title:string='我是一个title';
  
  public picUrl='https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png';
  

  public list:any[]=[
    {
      "title":'我是新闻1'
    },
    {
      "title":'我是新闻2'
    },
    {
      "title":'我是新闻3'
    }
  ];


  public flag:boolean=true;


  public orderStatus:number=3;    /* 1表示已经支付   2支付并且确认订单   3、表示已经发货   4表示已经收货   其他、无效*/


  public attr:string='orange';



  public today:any=new Date();
  



  public keywords:string='这是默认值';

  constructor() { 


    console.log(this.today);


  }

  ngOnInit() {

  }
  
  run(){

      alert('这是一个自定义方法')
  }

  getData(){


    alert(this.title);

  }

  setData(){

    this.title='我是一个改变后的title';
  }

  runEvent(event){


    //ionic必须这样写

    let dom:any=event.target;

    dom.style.color="red";

  }

  keyDown(e){

    if(e.keyCode==13){
        console.log('按了一下回车')
    }else{


      //e.target 获取dom对象
      console.log(e.target.value);
    }
  
  }

  keyUp(e){

    if(e.keyCode==13){

        console.log(e.target.value);
        console.log('按了一下回车');
    }  
  }

  changeKeywords(){

    this.keywords='我是改变后的值';
  }

  getKeywords(){

    console.log(this.keywords)
  }
}

.css

img{
    max-width: 200px;
}
.red{
    color:red;
}
.blue{
    color: blue;
}

.orange{
    color: orange;
}