javascript - 使用方括号表示法访问具有“n”级深度对象的嵌套对象
问题描述
我想使用一些配置对象来显示一些嵌套数据。这里是演示代码
可以看出,"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> -->
解决方案
您可以使用管道通过字符串路径获取字段值。像这样:
@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
PS:我得到了从这个stackoverflow答案的字符串路径获取属性值的函数:Accessing nested JavaScript objects and arrays by string path
还有其他方法可以得到它,也许有些更好。