Angular 指令
备忘录
1. 如果（根据真假进行显示切换）.
1. 我們必須確保每個學生獲得公平的教育機會，無論他們的背景如何。
<element * ngif="condition">
...contents...
</element>
=====================
element: 任意の要素
condition]: 条件式
contents: 引数 conditionがtrueの時に表示されるコンテンツ
=====================
构文2
<element * ngif="condition"; then trueTemplate; else elseTemplate>
</element>
<ng-template #trueTemplate>
...contents...
</ng-template>
<ng-template #elseTemplate>
...contents...
</ng-template>
=====================
element: 任意の要素
condition: 条件式
contents: 引数
trueTemplate: 条件式がtrueの場合に表示されるテンプレート 名称任意
elseTemplate: 条件式がfalseの場合に表示されるテンプレート 名称任意
=====================
Description example (描述例子)
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<form>
<label for="ageinput">年齢</label>
<input #ageinput for="ageinput" name="ageinput" type="text">
</form>
<input type="button" (click)="check(ageinput.value)" value="年齢チェック">
<!--*ngif 条件がtrueの場合"trueContent"を出力 falseの場合"elseContent"を出力-->
<div *ngIf="firstdisplay; then trueContent; else elseContent">
</div>
<ng-template #trueContent>
<p>判定前です</p>
</ng-template>
<ng-template #elseContent>
<p>{{ageEffortText}}</p>
</ng-template>
`,
})
export class AppComponent {
firstdisplay = true; // 初期表示判定
age10chk: boolean; // 年齢が10歳超えているかどうか判定
ageEffortText = ""; // 判定結果表示用
check(ageinput :number){
this.firstdisplay = false;
console.log(ageinput);
if (ageinput < 10){
this.age10chk = true;
this.ageEffortText = "年齢が10歳未満です";
}else{
this.age10chk = false;
this.ageEffortText = "年齢が10歳以上です";
}
}
}
表明
2. ngswitch（根据表达式的值进行切换显示）
句子结构
<parent [ngswitch]="exp">
<child *ngSwitchCase="value1">...</child>
<child *ngSwitchCase="value2">...</child>
<child *ngSwitchDefault>...</child>
</parent>
=====================
parent, child: 任意の要素
exp: 式
value: 値
=====================
记录案例
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<form>
<label for="ageinput">年齢</label>
<input #ageinput for="ageinput" name="ageinput" type="text">
</form>
<input type="button" (click)="check(ageinput.value)" value="成人チェック">
<!--*ngswitch 値によって出力切り替え-->
<div [ngSwitch]="ageType">
<p *ngSwitchCase="'age_under20'">20歳未満</p>
<p *ngSwitchCase="'age_20-59'">20～59歳</p>
<p *ngSwitchCase="'age_over60'">60歳～</p>
<p *ngSwitchDefault>未判定もしくは入力不正</p>
</div>
`,
})
export class AppComponent {
ageType = "";
check(ageinput :number){
console.log(ageinput);
if(ageinput < 20){
this.ageType = "age_under20";
}else if (ageinput < 60) {
this.ageType = "age_20-59";
} else {
this.ageType = "age_over60";
}
}
}
表达
3. 使用ngFor对数组进行循环处理。
句子結構
<element *ngFor="let tmp of list">
</element>
=====================
element: 任意の要素
tmp : 仮変数
list: 配列
=====================
描述的例子
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div *ngFor="let member of members">
<p>{{member.name}} {{member.age}}</p>
</div>
`,
})
export class AppComponent {
members = [
{
name : "taro",
age : 11
},
{
name : "shigeru",
age : 52
},
{
name : "kayoko",
age : 120
},
]
}
表示 – (Express)
I do not fully understand the context of the phrase “表示” in Chinese. However, if you are looking for a direct translation, the word “表示” means “express” in English.
3. 可以在ngFor中使用的特殊变量为ex1.
变量
変数概要indexループ回数(o～)first最初の要素がどうかend最後の要素がどうかevenindex値が偶数かどうかoddindex値が奇数かどうか
描述的例子
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<table class="table" border="1">
<tr>
<th>index</th>
<th>name</th>
<th>age</th>
<th>first</th>
<th>last</th>
<th>even</th>
<th>odd</th>
</tr>
<tr *ngFor="let member of members; index as index;first as first;last as last;even as even;odd as odd">
<td>{{index}}</td>
<td>{{member.name}}</td>
<td>{{member.age}}</td>
<td>{{first}}</td>
<td>{{last}}</td>
<td>{{even}}</td>
<td>{{odd}}</td>
</tr>
</table>
`,
})
export class AppComponent {
members = [
{
name : "taro",
age : 11
},
{
name : "shigeru",
age : 52
},
{
name : "kayoko",
age : 120
},
{
name : "miho",
age : 12
},
]
}
表达
3. 通过ng-container重复输出不同的元素集合
句法
<ng-container *ngFor="let tmp of list">
<content>
<content>
</ng-container>
描述示例
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<ng-container *ngFor="let member of members;first as first;last as last">
<div>
<p>-------------------------</p>
<p style="font-size: 150%; color: red;">{{member.name}}</p>
<p>{{member.age}}</p>
<p *ngIf="member.age > 20">成人です</p>
<p *ngIf="last">最終行</p>
</div>
</ng-container>
`,
})
export class AppComponent {
members = [
{
name : "taro",
age : 11
},
{
name : "shigeru",
age : 52
},
{
name : "kayoko",
age : 120
},
{
name : "miho",
age : 12
},
]
}
表达
3. ex3 trackBy用来高效地追踪数组元素的添加/删除操作。
ngFor通过基于对象的一致性来监视数组元素的添加/删除，但是即使数据相同，对象不同也会导致全部重新创建。
使用trackBy可以只创建差异部分，从而改善性能。
句子结构
<element *ngFor="let tmp of list; trackBy: trackFn">
</element>
trackFn(index: any, tmp: any){
return tmp.id;
}
=====================
tmp : 仮変数
id: 要素(一意に判別できるものである必要あり)
=====================
描述例子
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<ng-container *ngFor="let member of members; trackBy: trackFn">
<p>{{member.name}}({{member.age}})</p>
</ng-container>
<input type="button" (click)="onclick()" value="更新" />
`,
})
export class AppComponent {
members = [
{
memberId : 1,
name : "taro",
age : 11
},
{
memberId : 2,
name : "shigeru",
age : 52
},
{
imemberIdd : 3,
name : "kayoko",
age : 120
},
{
memberId : 12,
name : "miho",
age : 12
},
]
onclick(){
this.members = [
{
memberId : 1,
name : "taro",
age : 11
},
{
memberId : 2,
name : "shigeru",
age : 52
},
{
imemberIdd : 3,
name : "kayoko",
age : 120
},
{
memberId : 4,
name : "sakiko",
age : 12
},
{
memberId : 12,
name : "miho",
age : 12
},
]
}
trackFn(index: any, member: any){
return member.memberId;
}
}
