括号中的点访问嵌套属性

Question

考虑以下对象：

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

我们可以使用 "dots" 或 "brackets" 访问客户名称，如下所示：

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

问题

在 Javascript 或 Typescript 中，有没有像下面这样访问客户名称的方法？

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

备注

在 angular 中，我创建了一个基于 mat-table 的可重用 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) }}

括号中的点访问嵌套属性

Dots in bracket to access nested property

javascript

typescript

angular-material

angular

mat-table

括号中的点访问嵌套 属性

Dots in bracket to access nested property

javascript

typescript

angular-material

angular

mat-table

括号中的点访问嵌套属性