ngModel 데이터 바인딩

서버에서 응답받은 데이터를 html에 출력해주고 싶다면

데이터 바인딩이라는 것을 사용하면 된다.

 

데이터 바인딩에는 단방향 데이터와 양방향 데이터라는 것이 있는데,

 

엄청 간단하게 요약하자면

단방향 데이터는 그냥 저장된 데이터를 html 코드에 출력해주기만 하는 것이고,

양방향 데이터는 데이터가 변경되면

변경되는 즉시 html의 코드의 데이터가 업데이트 된다는 것이다.

 

즉 둘 다 데이터 Model로부터 값을 가져와

view에 보여주는 역할을 하지만 위와 같은 차이가 있다.

 

1. 양방향 데이터

html

typescript

typescript

 

위는 [(ngModel)]과 ionChange 이벤트 리스너를 사용하여 양방향 바인딩을 해준 것이다.

 

먼저 typescript 파일에서

서버에 http post 요청하여 응답받은 데이터를 name이라는 변수에 넣어준다.

그리고 name이라는 변수를

ngModel을 사용해 html에서 데이터를 출력해주면

 

[(ngModel)]="name"

 

title과 content가 수정되자마자 데이터가 변경되는 값을

이런식으로 확인할 수 있다.

 

즉 양방향 데이터인 ngModel을 사용할 경우,

데이터가 수정되면 새로고침하지 않아도 html 코드에 바로 업데이트 된다.

 

 

2. 단방향 데이터

단방향 데이터는 간단하다

<p>{{ name }}</p>

// 또는

<p [innerHTML]="name"></p>

이런식으로 html에 사용하면 된다.

 

.

.

 

역시 참고하여 자신의 코드에 적용하길 바란다.

 

 

참고하면 완전 좋을 사이트

poiemaweb.com/angular-component-data-binding

myjamong.tistory.com/30

lucaskim.tistory.com/43

dduruddung.tistory.com/entry/Angular-%EC%95%B5%EA%B7%A4%EB%9F%AC-%EB%B0%B0%EC%9A%B0%EA%B8%B0-6-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B0%94%EC%9D%B8%EB%94%A9-DataBinding

m.blog.naver.com/PostView.nhn?blogId=ksh81850&logNo=220350608381&proxyReferer=https:%2F%2Fwww.google.com%2F