대괄호 표기법을 사용하여 "n"수준 깊은 개체가있는 중첩 된 개체에 액세스

Question

중첩 된 데이터를 표시하기 위해 구성 개체를 가져오고 싶습니다. 데모 코드는 다음과 같습니다.

보시다시피 "customer.something"내가 액세스해야하는 것입니다. 이제 'N'수준의 중첩이있을 수 있습니다. 그리드는 field='customer.something'. 내 사용하여 동일한 작업을 수행하는 방법template

<e-column field='customer.something' headerText='Other' editType='dropdownedit' [edit]='editParams' width=120>

다음은 HTML 파일입니다.

<ejs-grid #Grid [dataSource]='data' allowSorting='true'>
    <e-columns>
        <ng-template #colTemplate ngFor let-column [ngForOf]="colList">
            <e-column [field]='column.field' [headerText]='column.header' textAlign='Right' width=90>
                <ng-template #template let-data>
                    {{data[column.field] |  currency:'EUR'}} <-- want to fix this line
                </ng-template>
            </e-column>
        </ng-template>
    </e-columns>
</ejs-grid>

<!-- <ejs-grid #Grid [dataSource]='data' allowSorting='true'>
    <e-columns>
        <e-column field='price' isPrimaryKey='true' headerText='Price' textAlign='Right' width=90></e-column>
        <e-column field='customer.something' headerText='Other' editType='dropdownedit' [edit]='editParams' width=120>
        </e-column>
    </e-columns>
</ejs-grid> -->

Answer 1

파이프를 사용하여 문자열 경로로 필드 값을 가져올 수 있습니다. 이렇게 :

@Pipe({name: 'fieldFromPath'})
export class FieldFromPathPipe implements PipeTransform {
  transform(data: Object, property: string): Object {
    property = property.replace(/\[(\w+)\]/g, '.$1');
    property = property.replace(/^\./, '');
    var a = property.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in data) {
            data = data[k];
        } else {
            return;
        }
    }
    return data;
  }
}

및 템플릿에서 :

<ng-template #template let-data>
 {{data | fieldFromPath: column.field |  currency:'EUR'}}
</ng-template>

다음과 같이 표시됩니다.

https://stackblitz.com/edit/angular-ej2syncfusion-angular-grid-jqm2kz

추신 :이 stackoverflow 답변에서 문자열 경로에서 속성 값을 가져 오는 기능이 있습니다. 문자열 경로로 중첩 된 JavaScript 객체 및 배열 액세스

그것을 얻는 다른 방법이 있습니다.