javascript - 括号中的点用于访问嵌套属性

Question

考虑下面的对象:

var item = {
  id: 'some-id',
  price: 12,
  customer: {
     id: 'fake-id',
     name: 'fake-name'
   }
};

我们可以使用“点”或“括号”来访问客户名称，如下所示:

• item.customer.name
• 项目['客户'].name
• item.customer['name']
• 项目。['客户']['姓名']

问题

在 Javascript 或 Typescript 中，有没有办法访问如下所示的客户名称？

item['customer.name'] 或 item[customer.name]

注释

在 Angular 中，我创建了一个基于 mat-table 的可重用表格组件，其中包括分页、排序过滤器和一堆其他功能...我使用以下内容进行列定义:

mytable.component.ts:

export interface MyTableCol {
    id: string;
    title: string;
    // some other settings...
}

mypage.component.ts:

cols: MyTableCol[] = [
  {id: 'price', title: 'Total Price'},
  {id: 'customer.name', title: 'Customer Name' }
];

mypage.component.html:

<my-table [columns]="cols"></my-table>

mytable.component.html:

<ng-container [matColumnDef]="col.id" *ngFor="let col of columns">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
            {{ col.title}}
    </th>
    <td mat-cell *matCellDef="let element">
        {{ element[col.id] }}
    </td>
</ng-container>

但是，对于嵌套属性 (customer.name)，这不起作用。我认为原因是行: element[col.id] 在客户名称列的情况下转换为 element['customer.id'] 。

我该如何解决这个问题？

Answer 1

它不会自动传递这样的字符串来访问属性，您需要创建一个 getter 函数，如 lodash _get并用它来找到您需要的值。然后写一些类似的内容:

{{ _getAtr(element, col.id) }}