2018-09-11 개발일지

어제 작성했던 개발일지를 이어나간다.

일단 angular에 적용해보기 위해 프로젝트를 하나 팠다.

ng new tableModule

프로젝트 폴더 뎁스는 다음과 같이 적용했다.

apiService는 예제를 만들기 위해 json파일을 읽어드리는 service이다.

어제 글에 테이블을 만드는 소스였는데

<ngx-datatable-column>이 directive로 되어있는데 어떻게 사용하는지 이해가 가질 않았다.

<ngx-datatable class="material" [rows]="rows" columnmode="force" [headerheight]="50" [footerheight]="0" [rowheight]="50" [scrollbarv]="true" [scrollbarh]="true">
   <ngx-datatable-column name="Name" [width]="300"></ngx-datatable-column>
   <ngx-datatable-column name="Gender"></ngx-datatable-column>
   <ngx-datatable-column name="Age"></ngx-datatable-column>
   <ngx-datatable-column name="City" [width]="300" prop="address.city"></ngx-datatable-column>
   <ngx-datatable-column name="State" [width]="300" prop="address.state"></ngx-datatable-column>
</ngx-datatable>

그래서 angular 공식 홈페이지에서 directive에 대해 다시 한 번 알아보기로 했다.

angular 공식홈페이지에서는 directive는 크게 Attribute Directive 와 Structural Directives가 있고 그 안에 짜잘하게 있는것 같다. Directive에 대해서는 google에 검색하면 친절한 글들이 많이 있다.

하지만 공홈 예제 샘플에서는 위처럼 tag로 사용하는 directive에 대해서는 나와있지가 않다.

그래서 결국 최후의 수단 방법인 console.log()를 찍어보리고 한다.

<ngx-datatable-column> tag의 Directive를 따라가다보면 수많은 @input() 들이 있으며 log를 찍어보면 속성들이 나온다.

그리고 <ngx-datatable>에서 밑에처럼 사용해서 directive 속성들을 가져오는 것 같다.

@ContentChildren(DataTableColumnDirective)
  set columnTemplates(val: QueryList<datatablecolumndirective>) {
    this._columnTemplates = val;
    this.translateColumns(val);
  }

이제 나도 만들어 보기로 한다.

<app-data-table [rows]='this.data'>
  <appDataTableColumn name='index' keyName='id' [width]='50' [widthType]='widthType.ABSOLUTE' [dataType]='dataType.STRING'></appDataTableColumn>
  <appDataTableColumn name='이름' keyName='name' [width]='150' [widthType]='widthType.ABSOLUTE' [dataType]='dataType.STRING'></appDataTableColumn>
  <appDataTableColumn name='성별' keyName='gender' [width]='200' [widthType]='widthType.ABSOLUTE' [dataType]='dataType.STRING'></appDataTableColumn>
  <appDataTableColumn name='나이' keyName='age' [width]='50' [widthType]='widthType.RELATIVE' [dataType]='dataType.STRING'></appDataTableColumn>
  <appDataTableColumn name='주소' keyName='address.city' [width]='15' [widthType]='widthType.RELATIVE' [dataType]='dataType.STRING'></appDataTableColumn>
  <appDataTableColumn name='수정' [width]='15' [widthType]='widthType.RELATIVE' [dataType]='dataType.BUTTON'></appDataTableColumn>
</app-data-table>

만들어졌다!

하지만 주소의 데이타들이 나오질 않는다.

주소의 typeof를 보니깐 [object Object]로 나온다. 내일한번 알아봐야겠다.