Greifen Sie mit der eckigen Klammer auf verschachtelte Objekte mit einem tiefen Objekt der Ebene „n“ zu

Question

Ich möchte ein Konfigurationsobjekt verwenden, um einige verschachtelte Daten anzuzeigen. Hier ist der Demo-Code

Wie man sieht, muss "customer.something"ich darauf zugreifen. Jetzt könnte es 'N'level of Nesting geben. Das Gitter kümmert sich darum mit field='customer.something'. Wie man das gleiche mit meinem machttemplate

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

Hier ist die HTML-Datei:

<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

You could use a pipe to get the field value by the string path. Like this:

@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;
  }
}

and on the template:

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

Here's how it would look:

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

PS: I got the function to get the property value from the string path from this stackoverflow answer: Accessing nested JavaScript objects and arrays by string path

There are other ways to get it, maybe some is better.