Angular ngFor ngSwitch

ngForによる繰り返し処理

繰り返しタグの表示を行いたい場合は、「ngFor」という構造ディレクテイブを使う。構造ディレクテイブとはテンプレートの中に記述できる、特別な役割を持った命令みたいなものである。

下記のようなものを作る

 

hello.component.html

 

<divid=“body”>

<p*ngIf=“visible”(click)=“doClick()”class=“red”>

This is TRUE message.

</p>

<ul>

<li*ngFor=“let item of data”>{{item}}</li>

</ul>

</div>

hello.component.ts

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

@Component({

selector: ‘app-hello’,

templateUrl: ‘./hello.component.html’,

styleUrls: [‘./hello.component.css’]

})

export classHelloComponentimplementsOnInit {

data:string[];

constructor() {

}

ngOnInit() {

this.data = [

最初の項目,

‘2番目の項目,

‘3番目の項目

];

}

}

 

ngSwitchを使ってみる

いくつもの中から一つを表示する、というような場合に用いられるのがngSwitchという構造的ディレクテイブである。ngSwitchは[ngSwitch]タグの中に選択肢タグを組み込む。

下記のようなものを作る

 

hello.component.html

<divid=“body”>

<h1>{{title}}</h1>

<p>{{message}}</p>

<div[ngSwitch]=“switch”>

<p*ngSwitchCase=“‘one'”>First paragraph!</p>

<p*ngSwitchCase=“‘two'”>second paragraph!</p>

<p*ngSwitchCase=“‘three'”>third paragraph!</p>

<p*ngSwitchCase=“‘default'”>default paragraph!</p>

</div>

<select#sel (change)=“doSelect(sel.value)”>

<option>one</option>

<option>two</option>

<option>three</option>

</select>

</div>

hello.component.ts

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

import {Title }from‘@angular/platform-browser’;

@Component({

selector:‘app-hello’,

templateUrl:‘./hello.component.html’,

styleUrls: [‘./hello.component.css’]

})

exportclassHelloComponentimplementsOnInit {

title:string;

message:string;

switch:string;

constructor() {

}

ngOnInit() {

this.title =‘Hello-app’;

this.message =‘select menu:’;

this.switch =‘one’;

}

doSelect(val:string) {

this.switch =val;

}

}

 

コメント