• 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- 200px;
    }
    .red{
        color:red;
    }
    .blue{
        color: blue;
    }
    
    .orange{
        color: orange;
    }
  • 相关阅读:
    报表容器元素的典型用途:保持位置关系+表角斜线
    如何在Wyn仪表板中实现文件下载
    报表表格中的迷你图
    怎么实现固定行数的表格类报表
    如何把自己设计好的仪表板分享给别人?
    报表中的【子弹图】实现方法
    来自不同数据集的图表如何设置联动
    仪表板图表条件格式化设置
    报表中的数据格式设置方法汇总
    仪表板数据表根据用户需求可以自由选择查看的数据列
  • 原文地址:https://www.cnblogs.com/loaderman/p/10882694.html
Copyright © 2020-2023  润新知