accéder à un objet imbriqué avec un objet profond de niveau «n» en utilisant la notation entre crochets

Question

Je veux prendre un objet de configuration pour afficher des données imbriquées.Voici le code de démonstration

Comme on peut le voir, "customer.something"c'est ce à quoi j'ai besoin d'accéder. Maintenant, il pourrait y avoir un niveau de nidification. La grille s'en charge en utilisant field='customer.something'. Comment faire de même avec montemplate

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

Voici le fichier 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

Vous pouvez utiliser un tube pour obtenir la valeur du champ par le chemin de la chaîne. Comme ça:

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

et sur le modèle:

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

Voici à quoi cela ressemblerait:

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

PS: J'ai obtenu la fonction pour obtenir la valeur de la propriété à partir du chemin de chaîne de cette réponse stackoverflow: Accéder aux objets et tableaux JavaScript imbriqués par chemin de chaîne

Il y a d'autres façons de l'obtenir, peut-être que certaines sont meilleures.