Web/Angular 5

Angular *ngFor

ngFor를 사용하는 방법은 다음과 같다. 예를 들어 게시판의 글 데이터의 수만큼 html 코드를 반복해야한다고 하면, 아래 코드처럼 반복할 html 문 태그 안에 *ngFor="let 데이터 of 데이터배열" 을 넣어주면 된다. 데이터를 출력할 때는 *ngFor="let data of datas" data.board_id 이런식으로 출력해도 되고 *ngFor="let data of datas; let i=index;" data_title[i] data_content[i] index를 이용하여 출력해도 된다. 즉 서버에서 데이터를 요청/응답받아 datas, data_title, data_content 배열에 넣고, 그 배열의 수만큼 html 에서 for문을 돌려 출력해주는 것이다. 그러면 이런식으로 게시..

Web/Angular 2020.12.09

Angular Http post

서버에서 http post 요청을 하여 데이터를 받아오는 방법은 다음과 같습니다. 먼저 HttpClient와 HttpParams 모듈을 추가해준 후, var params = new HttpParams() .set('param1', 'value') .set('param2', 'value') this.http.post(url, params).toPromise() .then((res:any) => { // Example this.name = res.content[0].name; this.title = decodeURI(res.content[0].title) .replace(/%2[cC]/g, ",") .replace(/%3[aA]/g, ":"); ... }) .catch(err => { console.log(..

Web/Angular 2020.12.09

ngModel 데이터 바인딩

서버에서 응답받은 데이터를 html에 출력해주고 싶다면 데이터 바인딩이라는 것을 사용하면 된다. 데이터 바인딩에는 단방향 데이터와 양방향 데이터라는 것이 있는데, 엄청 간단하게 요약하자면 단방향 데이터는 그냥 저장된 데이터를 html 코드에 출력해주기만 하는 것이고, 양방향 데이터는 데이터가 변경되면 변경되는 즉시 html의 코드의 데이터가 업데이트 된다는 것이다. 즉 둘 다 데이터 Model로부터 값을 가져와 view에 보여주는 역할을 하지만 위와 같은 차이가 있다. 1. 양방향 데이터 위는 [(ngModel)]과 ionChange 이벤트 리스너를 사용하여 양방향 바인딩을 해준 것이다. 먼저 typescript 파일에서 서버에 http post 요청하여 응답받은 데이터를 name이라는 변수에 넣어준다...

Web/Angular 2020.12.08

[Error] Uncaught (in promise): NullInjectorError: R3InjectorError

코드를 짜다가 계속 이런 오류를 마주하게 됐었는데, (file transfer, camera, googleMap 등...) 이유는 app.module.ts에 사용하려는 모듈을 import 시키지 않아서 생기는 오류였다. 즉 최상위 app.module.ts에 설치한 plugin을 import하고 providers에 등록해주면 됩니다. 위 코드를 참고하여 넣어주세요. 참고 stackoverflow.com/questions/47236963/no-provider-for-httpclient kenneth-dev.tistory.com/7

Web/Angular 2020.12.07