2018-09-12 개발일지

어제에 이어서 개발을 해본다.

data table을 만든 후에 주소의 데이터가 나오질 않았다.

주소 데이터의 typeof를 보니깐 [object Object]로 나왔다. 이것은 data 값이 json 형태이기 때문이다.

내가 실습을 하기위한 데이터의 형태는 다음과 같다.

{
    "id": 0,
    "name": "Ramsey Cummings",
    "gender": "male",
    "age": 52,
    "address": {
      "state": "South Carolina",
      "city": "Glendale"
    }
  }

여기서 어제 만든 모듈을 사용하려면 다음과 같이 component의 형태를 사용했었다.

여기서 주소 부분의 keyname을 보면 address.city 로 되어있는 것을 확인할 수 있다.

모듈로 만들다 보니 사용자가 원하는 데이터를 뽑기 위해 2차원 json의 데이터를 가져올 때 다음과 같이 선언을 할 수 있다.

<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>

table의 tbody만 보면 다음과 같다.

여기서 봐야할 부분믄  {{item[column.keyName]}} 이다.

이 부분이 실질적으로 어떻게 적용되냐면 item[id], item[name] 처럼 적용이 되는 건데 주소부분이 적용이 되면

item[address.city] 가 되는것이다. 이러니 데이터가 나오질 않는다.

    <tbody>
      <tr *ngFor="let item of this._rows">
        <ng-container *ngFor="let column of this.columnsConfig">
          <td *ngIf="column.dataType !== dataType.BUTTON; else Btn">
            {{item[column.keyName]}}
          </td>
          <ng-template #Btn>
            <td>
              <button>{{column.name}}</button>
            </td>
          </ng-template>
        </ng-container>
      </tr>
    </tbody>

이 부분을 어떻게 해야할지 계속 고민을 하다가 오후에 해결책이 생각이 나서 적용해 봤다.

swimlane은 되게 복잡하게 만들어서 이해하는데 시간이 너무 오래 걸릴꺼 같아 간단하게 만들어보기로 했다.

원리는 간단하다.

server에서 받아온 json 데이터에 component 한정적으로 임시 데이터를 넣어서 불러오는 것이다.

=> json 데이터 형태가 맨 위와 같다면 여기에 address.city 속성을 임의로 넣는 것이다.

this.columnsConfig.forEach(v => {
// directive에서 받은 column 중에서 2차원 json의 형태인 column을 찾는다.
 if (v.keyName !== undefined && (v.keyName.includes('\.'))) {   
  const attr = v.keyName;
  this.setRowData(this._rows, attr); // 임시 데이터를 넣는다.
 }



 setRowData(row: any[], attr: string) {
   let _rows = row;
  _rows.map(v => {     
 // eval과 getProp의 기능은 같다 하지만  다음의 글 을 참조하면 좋을꺼 같다.
// https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/eval
// v[attr] = eval('v.' + attr);     
    v[attr] = this.getProp(v, attr);          
   });
   return _rows;
  }



 getProp (obj: any[], desc: string) {
   let arr = desc.split('.');
   while (arr.length) {
    obj = obj[arr.shift()];
   }
   return obj;
}
})

잘 적용된다!

그 다음에 적용해야할 것은 페이지 네이션과 popup component의 연결이다.