常見數據操作

1 插值表達式

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template:`
    <h1>{{title}}</h1>
    <h2>我喜歡的地方: {{mySite}}</h2>
    `
})
export class AppComponent {
  title = '標題';
  mySite = '江南';
}

2 數組循環

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{teacher}}</h1>
    <p>優秀講師:</p>
    <ul>
      <li *ngFor="let list of teacherList">
        {{list}}
      </li>
    </ul>
    `
})
export class AppComponent{
  title = '特級教師';
  teacherList = ['張老師', '李老師', '王老師', '安老師'];
}

3 數組嵌套對象

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{teacher}}</h1>
    <p>優秀講師:</p>
    <ul>
      <li *ngFor="let list of teacherList">
        <div>
            <span>{{list.name}}</span>
            <span>教齡:{{list.age}}</span>
        <div>
      </li>
    </ul>
    `
})
 
export class AppComponent{
  title = '特級教師';
  teacherList = [
    {
        name:"張老師",
        age:"12"
    },
    {
        name:"王老師",
        age:"18"
    },
    {
        name:"成老師",
        age:"22"
    }
  ];
}

4 獲取索引值

import { Component } from '@angular/core';
@Component({
 selector: 'my-app',
 template: `
   <h1>{{teacher}}</h1>
   <p>優秀講師:</p>
   <ul>
     <li *ngFor="let list of teacherList;let idx=index"">
       <div>
           <span>{{idx}}</span>
           <span>{{list.name}}</span>
           <span>教齡:{{list.age}}</span>
       <div>
     </li>
   </ul>
   `
})

export class AppComponent{
 title = '特級教師';
 teacherList = [
   {
       name:"張老師",
       age:"12"
   },{
       name:"王老師",
       age:"18"
   },{
       name:"成老師",
       age:"22"
   },{
       name:"戰老師",
       age:"27"
   }
 ];
}

5 條件判斷顯示

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{teacher}}</h1>
    <p>優秀講師:</p>
    <ul>
      <li *ngFor="let list of teacherList;let idx=index"">
        <div>
            <span>{{idx}}</span>
            <span>{{list.name}}</span>
            <span>教齡:{{list.age}}</span>
        <div>
        <div *ngIf='teacherList.length > 4'>特級教師有點多</div>
      </li>
    </ul>
    `
})
 
export class AppComponent{
  title = '特級教師';
  teacherList = [
    {
        name:"張老師",
        age:"12"
    },
    {
        name:"王老師",
        age:"18"
    },
    {
        name:"成老師",
        age:"22"
    },
    {
        name:"戰老師",
        age:"27"
    }
  ];
}

事件的相關綁定

1 點擊事件

import { Component } from '@angular/core';
@Component({
  selector: 'mny-click',
  template: `
    <button (click)="incident()">點擊事件</button>
    {{clickMessage}}`
})
export class ClickMeComponent {
  clickMessage = '';
 
  onClickMe() {
    this.clickMessage = 'hello Word!';
  }
}

2 通過$event對象獲取輸入的相關值

import { Component } from '@angular/core';
@Component({
  selector: 'mny-click',
  template: `
    <input (keyup)="onKey($event)">
    <p>{{values}}</p>
    `
})
export class ClickMeComponent {
 
  values = '';
 
  /*
  // 非強類型
  onKey(event:any) {
    this.values += event.target.value + ' | ';
  }
  */
  // 強類型
  onKey(event: KeyboardEvent) {
    this.values += (<HTMLInputElement>event.target).value + ' | ';
  }
}

3 失去焦點事件

@Component({
  selector: 'key-up4',
  template: `
    <input
      (blur)="values+1" />
      <p>{{values}}</p>
    `
})
export class KeyUpComponent_v4 {
  values = '';
}

4 動態添加類(css)

@Component({
  selector: 'key-up4',
  template: `
    <div [ngClass]="{'active01':number>20}"></div>
    <div [ngClass]="{'active02':age>20&&age<40}"></div>
      <p>{{values}}</p>
    `
})
export class KeyUpComponent_v4 {
  number = 30;
  age = 30
}

5 阻止事件冒泡

@Component({
  selector: 'key-up4',
  template: `
    <button (click)='incident;$event.stopPropagation();'></button>
    `
})
//注意！ 使用tap來進行事件對點擊，則上面對點擊事件不會起效果