Angular> 결제화면 3

Country and State

Frontend

1. Country와 State의 클래스를 만든다.

2. 서비스에 Countries와 States 관련 메서드를 추가한다.

3. 서비스로부터 country 데이터를 얻을 수 있게 checkout component 수정

4. country 관련 드랍다운 리스트를 HTML에 추가

5. checkout component에 이벤트 핸들러 추가

6. state 관련 드랍다운 리스트를 HTML에 추가

 

 

1.

ng generate common/Country

ng generate common/State

 

 

 

 

2.

 

baseUrl 과 constructor에 HttpClient 추가

 

RestAPI에서 _embedded 내용을 가져오기 위해 인터페이스를 만든다. 

 

3.

 

 

 

4.

 

5. 

 

값이 변하면 component.ts에서 메서드 하나 실행할 수 있게 수정한다. 

 

 

Country에 따라서 State를 받아올 수 있게 변수를 만든다. 

 

ngValue는 의미는

화면에 보여지는게 state.name으로 나오는데 드랍다운으로 하나를 선택하면

데이터는 state.name가 되는게 아니라 state 클래스가 된다는 뜻이다. 

따라서 shippingAddress 컨트롤의 state 변수에는 선택한 state가 된다.

 

흐름을 정리하면

처음 시작되면 Service로 국가들을 가져온다. 
ts의 countries에 넣는다.
HTML에서 ts의 countries 배열을 반복문으로 뿌린다. 
이름은 country.name이고 내용은 country 클래스
HTML에서 이 값은 ts에서 formGroup의 Control의 변수에 입력된다.
값이 변하면 ts의 getStates 메서드를 실행한다. 
getStates에서 HTML 값이 필요할 땐 ts의 formGroup의 Control 변수를 이용한다.
ts에서 Service를 통해 countryCode로 State를 가져와 ts의 변수에 입력. 
ts에서 formGroup의 해당 control에 초기값 입력한다.
HTML에선 ts 변수를 가져와 배열을 뿌린다.

 

billingAddress에는 shippingAddress 내용을 가져와서 쓰면 된다.

 

 

 bilingAddress는 ts에서 billingAddressStates 배열의 내용을 갖고 오니까 

shipping Address 복사를 해도 배열값은 안 변했으니 복사가 안된다.

따라서 배열복사도 해준다.