【Angular Binding編2】Angular5を学び始めるにあたっての備忘録。

      2017/11/27




Angularを学び始めた方に、役立てれば幸いです。

前回のデータバインディングに関しての記事も合わせて読んでね。

Angular5を学び始めた。今回はデータバインディングに関しての備忘録。

 

イベントバインディングに関して

ボタンを押したときのイベントに対応させます。

 

server.component.tsに、

onServerText=’kotira’;

onCreateServer() {
  this.onServerText = 'atira';
}
を追加する。
onCreateServer()メソッドが実行されると、onServerTextの値が変化する。

server.component.htmlのボタンに

(click)="onCreateServer()"
<p>{{onServerText}}</p>

を追加する。

ボタンを、クリックするとonCreateServer()が実行される。
そして、<p>{{onServerText}}</p>の表示が、kotiraからatiraに変化する。

 

簡単ですね。



試しに、

<p >{{getServerStatus()}}</p>の部分に、
(click)="onCreateServer()"を追加しました。
問題なく動作しました。(参考までに)

テキストの入力時のイベントを取得する。

server.component.tsに

onUpdateServer(event) {
console.log(event);
}
メソッドを呼ばれると、そのイベントを取得して、コンソールに表示する。

server.component.htmlに

テキスト入力用の

<input type="text"
       class="form-control"
       (input)="onUpdateServer($event)">

を追加する。
 (input)="onUpdateServer($event)"
の部分は、テキストを入力するたびに、イベントを取得。

実際に入力してみる。デベロッパーツールを表示する。

testと四つの文字を入力しまいた。

一文字打つごとにイベントが取得されている。

入力した文字を、取得してみる。

server.component.tsに

serverName= ”;

を追加して、

下記を変更しました。

onUpdateServer(event) {
this.serverName = (<HTMLInputElement>event.target).value; }
}

 

server.component.htmlに

<p>{{serverName}}</p>
を追加

実際の表示は、

 

 

双方向バインディングに関してです。

双方向バインディングを有効にするには、

app.module.tsファイルを開いて、FormsModuleを追加する必要がある。

import {FormsModule} from '@angular/forms';が正しい。
import {FormsModule} from "@angular/forms";だとエラーになる。注意。

そして、

server.component.htmlに

<input type="text"
       class="form-control"
       [(ngModel)]="serverName">
に変更。

server.component.tsで、

serverName= 'testserver';
に変更

表示すると、

serverName= 'testserver';の値が表示される。

次に、上の段に文字を入力すると、

(input)="onUpdateServer($event)"により、
serverNameの値が変更される。
双方向バインディングなので、同時に、下の段の文字も変更される。

今回もバインディングに関して書きました。

 

 

 

The following two tabs change content below.

まーちゃん masa

岐阜在住のバツイチ、転職5回、人生後半戦の人生経験豊富なブロガーです。 自分が経験した中で感じたことや考えたことで、お役に立ちそうな記事を執筆していこうと思ってます。 twitterのフォローもお願いいたします。

 - Angular