【Angular】事件綁定與ngIf

基本用法

<li (click)="onSelected(member)">
  • onclik → onclick事件
  • onSelected(member) → 綁定的handler函數,定義會寫在app.component.ts

Typescript定義

export class Member {
  id: number;
  name: string;
}

//Member クラスのようにプロパティーを強制する
const MEMBERS: Member[] = [
  {id: 11, name: '武山学'},
  {id: 12, name: '初音ミク'},
  {id: 13, name: '桐山零'},
  {id: 14, name: '三角竜之'},
  {id: 15, name: '羽生結弦'},
  {id: 16, name: '佐々木希'},
  {id: 17, name: '松崎はとり'},
  {id: 18, name: '半沢直樹'},
  {id: 19, name: '伊藤幸'},
  {id: 20, name: '桜田深雪'}
];

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})


export class AppComponent  {
  title='自社社員名簿';
  members = MEMBERS; 
  // 選択している社員を保存するため、保存用のプロパティーを定義する
  selectedMember: Member;
  // selectedMember只有在onselected觸發後,才會有值。一開始的時候沒有值
  onSelected(member: Member): void {
    this.selectedMember=member;
  }
}

HTML模板與Ngif

<h1>{{title}}</h1>
<h2>社員一覧</h2>

<ul class="members">
<!-- クリックイベントを設定する -->
  <li *ngFor="let member of members" (click)="onSelected(member)">
    <spanclass="badge">{{member.id}}</span>
    {{member.name}}
  </li>
</ul>
<!-- selectedMemberがまだ選択されてない時はエラーになる -->
<!-- selectedMemberがまだ選択された時のみ、以下のHTMLを表示する -->
<div *ngIf="selectedMember">
<!-- selectedMemberの値がある場合、コンテンツを表示する -->
  <h2>{{selectedMember.name}}</h2>
  <div>
    <label>id: </label>{{selectedMember.id}}
  </div>
  <div>
    <label>name: </label>
    <input type="text" [(ngModel)]="selectedMember.name"placeholder="名前">
  </div>
</div>

屬性綁定

當onclick觸發事件後,綁定class在元素上


<h1>{{title}}</h1>
<h2>社員一覧</h2>

<ul cl
ass="members">
<!-- クリックイベントを設定する -->
<li *ngFor="let member of members" (click)="onSelected(member)" [class.selected]="member === selectedMember">
<!-- []に書かれたものはHTMLの属性値の指定 -->
<!-- class名を指定しています。class="selected"を追加するための書き方 -->
<!-- ngForで回しているmember変数を、選択済みのselectedMemberになる時、class="selected"を追加する -->
<spanclass="badge">{{member.id}}</span>
{{member.name}}
</li>
</ul>
<div *ngIf="selectedMember">
<h2>{{selectedMember.name}}</h2>
<div>
<label>id: </label>{{selectedMember.id}}
</div>
<div>
<label>name: </label>
<inputtype="text" [(ngModel)]="selectedMember.name"placeholder="名前">
</div>
</div>

【Angular】Ngfor 迴圈

用途

可以迴圈生成HTML片段

物件設定

export class Member {
  id: number;
  name: string;
}

//Member クラスのようにプロパティーを強制する
const MEMBERS: Member[] = [
  {id: 11, name: '武山学'},
  {id: 12, name: '初音ミク'},
  {id: 13, name: '桐山零'},
  {id: 14, name: '三角竜之'},
  {id: 15, name: '羽生結弦'},
  {id: 16, name: '佐々木希'},
  {id: 17, name: '松崎はとり'},
  {id: 18, name: '半沢直樹'},
  {id: 19, name: '伊藤幸'},
  {id: 20, name: '桜田深雪'}
];

//資料的設定一定要在@Component上方,否則會噴錯
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})


// プロパティーを定義する
export class AppComponent  {
  title='自社社員名簿';
  members = MEMBERS; 
  
}

HTML模板

ngFor語法:let <自定義的名稱(可自訂)> of <變數名(固定)>

<h1>{{title}}</h1>
<h2>社員一覧</h2>
<ul>
  <li *ngFor="let member of members">
    <spanclass="badge">{{member.id}}</span>
    {{member.name}}
  </li>
</ul>

【Angular】雙向綁定

意涵

input元素⇄JS物件

  • input元素的值會由JS物件決定
  • 當input發生輸入,新的值會重設JS物件的值

定義Property

export class Member {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

// プロパティーを定義する
export class AppComponent  {
  title='自社社員名簿';
  // クラスを型として指定。IDとnameのプロパティーをオブジェクトに強制したい
  member: Member={
    id: 1,
    name: '山田太郎'
  }
}

設定HTML模板

<h1>{{title}}</h1>
<h2>{{member.name}}</h2>
<div>
  <label>id: </label>
  <span>{{member.id}}</span>
</div>
<div>
  <label>name: </label>
  <!-- <span>{{member.name}}</span> -->
  <!-- 雙向綁定 -->
  <input type="text" [(ngModel)]="member.name"placeholder="名前" />
</div>

Ng Model設定

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//moduleを追加
import {FormsModule} from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
    imports:      [ 
        //FormsModuleを配列に追加
        BrowserModule, 
        FormsModule 
    ],
    declarations: [ 
        AppComponent 
    ],
    bootstrap:    [ 
        AppComponent 
    ]
  })
export class AppModule { }

【TypeScript】interface

用法

interface(接口),可以強制定義class的屬性名稱,數量,型別

定義class

//インターフェイスは定義だけで実装がない、クラスのようなものですものです
//クラスに特定な機能を実装を強制する目的で利用されます

interface Animal {
    name: string;//「name」というプロパティーをクラスに強制する
    legs: number;
    isCry: boolean; 
    cry(): void;
}


class Dog implements Animal {
    name: string='Maru';
    legs: number=4;
    isCry: boolean=true;
    cry(): void{
        if (this.isCry) {
            console.log('bow, wow!');
        }
    }
}

定義物件

interface Animal {
    name: string;
    legs: number;
    isCry: boolean; 
    cry(): void;
}

let Dog: Animal {
    name: 'Maru',
    legs: 4,
    isCry: true,
    cry() {
        console.log('bow, wow!');
    }
}

類似的方法

當覺得不需要使用interface小題大作,卻又想強制定義屬性時,可以使用以下的方法

let Dog: { name: string, legs: number } = {
 name: 'Maru',
 legs: 4,
}

【TypeScript】Generics 泛型

用法

透過參數客製化class,是TypeScript獨有的機能

傳統的寫法

class NumberStore{
    data: number;
}

class StringStore{
    data: string;
}

//型チェックができません
class AnyStore{
    data: any
}

使用泛型的寫法

//Tという文字は自由に名付けられる
class Store<T>{
    data: T;
    getStore(): T{
        return this.data;
    }
}

let stringStore=new Store();
stringStore.data = 'X';
console.log(stringStore.getStore()); //'X'

let numberStore = new Store();
numberStore.data = 100000;
console.log(numberStore.getStore()); //100000

函數的泛型

function hello<T>(keyword: T) {
 console.log(`Log: ${keyword}`);
}

hello<string>('Hello Ian!'); //'Log: Hello Ian!'
hello<number>(1000000000);//'Log: Hello 1000000000'

指定2個以上的泛型參數

class Component<T, U>{
    name: T;
    created: U;
}

let component = new Component<string, number>();
component.name = 'app';
component.created = Date.now();

【JavaScript】throw

用法

可以讓console panel噴出錯誤訊息

function count(number){
 if(number<10){
  throw 'number < 10';
 }else {
  throw 'number >= 10';
 }
}

噴出檔案名、行數

function count(number){
 if(number<10){
  throw new Error('number < 10');
 }else {
  throw 'number >= 10';
 }
}

【JavaScript】getter / setter

getter跟setter都是寫在物件底下的function方法

getter

給物件綁定訪問時(Access)可取得的函數

var obj = {
 log: ['example','test'],
 get latest() {
 if (this.log.length == 0) {
   return undefined;
  }else{
   return this.log[this.log.length - 1];
  }
 }
}

console.log(obj.log); //['example', 'test']
console.log(obj.latest); // "test"

setter

setter可以設定參數,然後讓物件回傳不同的值

//language 是一個物件
var language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN'; //透過setter設定參數
console.log(language.log); // ['EN']

language.current = 'FA'; //透過setter設定參數
console.log(language.log); // ['EN', 'FA']